/* ============================================================
   设计 token：主色 / 灰阶 / 圆角
   全局通过 var() 引用，改主题色只需调整此处
   ============================================================ */
:root {
    /* 间距系统（与 header padding 保持一致的全局公共间距） */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 15px; /* 页面容器和卡片的默认 padding/margin */
    --spacing-lg: 20px;
    --spacing-xl: 28px;

    /* 主色 */
    --color-primary: #667eea;
    --color-primary-dark: #5568d3;
    --color-primary-darker: #3d4fb0;
    --color-primary-light: #6a7de0;
    --color-primary-glow: #7b8ce8;
    /* 主色渐变：header / 浮动按钮共用，暗黑模式只需改这一处 */
    --color-primary-gradient: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 50%, var(--color-primary-light) 100%);
    --color-primary-gradient-disabled: linear-gradient(135deg, rgba(61, 79, 176, 0.5) 0%, rgba(85, 104, 211, 0.5) 50%, rgba(106, 125, 224, 0.5) 100%);

    /* 背景与表面 */
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-alt: #fafafa;
    --color-surface-sunken: #f0f0f0;
    --color-segment-bg: #eef1f6;
    --color-surface-tint: #f8f9ff;

    /* 文字 */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-tertiary: #999;
    --color-text-faint: #aaa;
    --color-text-quaternary: #b8b8b8;
    --color-text-placeholder: #bbb;
    --color-text-disabled: #c8c8c8;
    --color-text-on-primary: #fff;

    /* 边框与分隔线 */
    --color-border: #e0e0e0;
    --color-border-input: #e5e5e5;
    --color-border-light: #f0f0f0;
    --color-border-lighter: #f7f7f7;

    /* 语义色 */
    --color-up: #ff3b30;
    --color-down: #34c759;
    --color-up-dark: #c62828;
    --color-down-dark: #388e3c;
    --color-warning: #ff9800;
    --color-warning-dark: #e65100;
    --color-info: #1976d2;

    /* 标签色对（背景+文字） */
    --tag-blue-bg: #eef2ff;
    --tag-blue-text: #1976d2;
    --tag-green-bg: #e8f5e9;
    --tag-green-text: #388e3c;
    --tag-red-bg: #ffebee;
    --tag-red-text: #ff3b30;
    --tag-orange-bg: #fff3e0;
    --tag-orange-text: #ff9800;
    --tag-pink-bg: #fce4ec;
    --tag-pink-text: #c2185b;
    --tag-purple-bg: #f0f3ff;
    --tag-purple-text: #5568d3;
    --tag-gold-bg: #fff8e1;
    --tag-gold-text: #b8860b;
    --tag-cyan-bg: #e0f7fa;
    --tag-cyan-text: #0097a7;

    /* 金色（星标/幸运/奖牌） */
    --color-gold: #ffb800;
    --color-gold-light: #ffd700;
    --color-gold-gradient: linear-gradient(180deg, #ffd700 0%, #ffb800 100%);

    /* 奖牌渐变 */
    --medal-gold: linear-gradient(135deg, #ffd700, #ffb700);
    --medal-silver: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    --medal-bronze: linear-gradient(135deg, #cd7f32, #b87333);
    --medal-default: #e0e0e0;

    /* 前三名排名背景渐变 */
    --rank-top1-bg: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    --rank-top2-bg: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    --rank-top3-bg: linear-gradient(135deg, #fff8f0 0%, #fff3e6 100%);

    /* header 玻璃态（蓝色 header 上的半透明白） */
    --glass-bg: rgba(255, 255, 255, 0.16);
    --glass-bg-faint: rgba(255, 255, 255, 0.12);
    --glass-bg-hover: rgba(255, 255, 255, 0.24);
    --glass-bg-active: rgba(255, 255, 255, 0.3);
    --glass-bg-strong: rgba(255, 255, 255, 0.95);
    --glass-bg-solid: rgba(255, 255, 255, 0.98);
    --glass-bg-disabled: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.24);
    --glass-border-strong: rgba(255, 255, 255, 0.4);
    --glass-text: rgba(255, 255, 255, 0.85);
    --glass-text-secondary: rgba(255, 255, 255, 0.7);
    --glass-text-tertiary: rgba(255, 255, 255, 0.55);
    --glass-text-disabled: rgba(255, 255, 255, 0.5);

    /* 滑块/选中态玻璃质感（真半透明 + 强模糊 + 高光描边）
       用于 .mode-slider / .weekly-slider / 选中态卡片
       与 --glass-bg-solid 的区别：后者是几乎不透明的"白纸"，
       而这套变量是真正的 glassmorphism，让背景颜色透出来 */
    --glass-slider-bg: rgba(255, 255, 255, 0.5);
    --glass-slider-bg-hover: rgba(255, 255, 255, 0.62);
    --glass-slider-border: rgba(255, 255, 255, 0.55);
    --glass-slider-highlight: rgba(255, 255, 255, 0.9);
    --glass-slider-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04);

    /* 底部导航 */
    --nav-bg: rgba(255, 255, 255, 0.94);
    --nav-text: #9aa0a6;
    --nav-glow: rgba(102, 126, 234, 0.06);

    /* loading */
    --color-loading-border: #f3f3f3;

    /* 圆角 */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* 字号 token：em 为相对父级比例（保留自适应语义），px 为绝对值
       用 var(--em-XX)/var(--fs-XX) 引用，改全局字号只调此处 */
    --em-55: 0.55em;
    --em-60: 0.6em;
    --em-62: 0.62em;
    --em-65: 0.65em;
    --em-66: 0.66em;
    --em-68: 0.68em;
    --em-70: 0.7em;
    --em-72: 0.72em;
    --em-75: 0.75em;
    --em-76: 0.76em;
    --em-78: 0.78em;
    --em-80: 0.8em;
    --em-82: 0.82em;
    --em-86: 0.86em;
    --em-90: 0.9em;
    --em-92: 0.92em;
    --em-95: 0.95em;
    --em-100: 1em;
    --em-105: 1.05em;
    --em-110: 1.1em;
    --em-115: 1.15em;
    --em-118: 1.18em;
    --em-120: 1.2em;
    --em-130: 1.3em;
    --em-260: 2.6em;

    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;

    /* 微信风格字号体系（6 档，与微信 App / WeUI 对齐）
       用法：var(--fs-title-lg) 等，逐步替代 --em-XX token */
    --fs-title-lg: 16px; /* L1 大标题：header h1 页面主标题 */
    --fs-title: 15px; /* L2 标题：卡片标题、榜单名、模块标题、重点数字 */
    --fs-subtitle: 13px; /* L3 副标题：区块小标题、基金副标题、代码 */
    --fs-body: 14px; /* L4 正文：基金名、股票名、主要正文（body 基准） */
    --fs-caption: 11px; /* L5 辅助：标签、提示、备注、时间 */
    --fs-mini: 10px; /* L6 极小：Tab 文字、角标、极小说明 */
}

/* ============================================================
   公共工具类
   ============================================================ */

/* RemixIcon 图标容器：icons.js 运行时把 SVG path 注入 <i> 内部（替代字体图标方案）
   SVG 用 fill=currentColor 继承 color，width/height=1em 跟随 font-size */
i[class*="ri-"] {
    font-style: normal;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* 隐藏元素（统一替代内联 display:none）
   注意：不加 !important —— 本项目 JS 用 el.style.display 切换显隐，
   !important 会覆盖 inline style 导致元素无法被 JS 显示。 */
.hidden {
    display: none;
}

/* GlobalLoading 的 hidden 必须覆盖 .gl-loading.gl-loading-full/inline 的 display:flex
   （否则 hide() 加了 hidden class 但 display:flex 优先级更高，loading 永远不消失） */
.gl-loading.hidden {
    display: none !important;
}

/* .hidden 必须能覆盖 .sort-btn / .mode-btn 等后出现的 display 规则 */
.sort-btn.hidden,
.mode-btn.hidden,
.header-back-btn.hidden,
.fav-filter-btn.hidden {
    display: none !important;
}

/* 重试按钮：统一错误/空状态下的重试操作样式 */
.retry-btn {
    padding: 8px 20px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--em-90);
}

/* 卡片式空状态（有白底圆角，区别于无背景的 .empty-state） */
.empty-card {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    color: var(--color-text-tertiary);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}
.empty-card .retry-btn {
    margin-top: 12px;
}

/* 错误信息内段落与重试按钮的间距 */
.error-message p {
    margin: 0 0 10px;
}
.error-message .retry-btn {
    margin-top: 10px;
}

/* 未知板块标签：灰色调，与其他板块标签形成视觉区分 */
.sector-tag.sector-unknown {
    background: var(--color-surface-sunken);
    color: var(--color-text-tertiary);
}

/* 公共样式 - Header、底部导航栏、刷新按钮 */

/* 隐藏滚动条但允许滚动 */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Header公共样式：渐变背景 + 光晕 + 圆角 + h1装饰条（rankings/index共享） */
.header {
    background: radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 55%), radial-gradient(ellipse at 88% 100%, rgba(123, 140, 232, 0.38) 0%, transparent 55%), var(--color-primary-gradient);
    color: var(--color-text-on-primary);
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-radius: 0 0 20px 20px;
    box-shadow:
        0 6px 28px rgba(58, 75, 168, 0.32),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
}

.header h1::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1em;
    margin-right: 8px;
    background: var(--color-gold-gradient);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 184, 0, 0.55);
    flex-shrink: 0;
}

.header-info {
    font-size: var(--fs-caption);
    opacity: 0.9;
    margin-left: auto;
}

/* body公共样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: var(--fs-body);
    background: var(--color-bg);
    min-height: 100vh;
    padding-bottom: 55px;
    overflow-x: hidden;
}

/* 底部导航栏 —— 精致弹性动画版（iOS/Material 风格：毛玻璃 + 线条填充切换 + 弹簧弹跳 + 圆点指示器） */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(102, 126, 234, 0.06) 0%, transparent 70%), rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    display: flex;
    justify-content: space-around;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.05),
        0 -6px 24px rgba(0, 0, 0, 0.03);
    z-index: 100;
}

.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--nav-text);
    font-size: var(--fs-mini);
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: none;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

/* nav-icon：grid 布局让 line/fill 双 SVG 叠加在同一位置
   高级动画：line 用 stroke-dasharray 描画消失，fill 弹性弹出 + 每个图标个性化动画 */
.nav-icon {
    font-size: var(--em-130);
    display: grid;
    place-items: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-icon-line,
.nav-icon-fill {
    grid-area: 1 / 1;
    width: 1em;
    height: 1em;
    display: block;
    transition: opacity 0.3s ease;
}

/* line path 描边过渡：JS 设置 strokeDasharray=len + --len 变量
   默认 offset=0（完整描画），激活时 offset 推到 --len（描画擦除） */
.nav-icon-line path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.4s ease;
}

/* fill 默认隐藏（缩小待命） */
.nav-icon-fill {
    opacity: 0;
    transform: scale(0.5);
}

/* 激活态：line 描画擦除 + 淡出 */
.nav-item.active .nav-icon-line {
    opacity: 0;
}

.nav-item.active .nav-icon-line path {
    stroke-dashoffset: var(--len, 200);
}

/* 激活态：fill 弹出显示，主色填充
   transform: scale(1) 覆盖默认 scale(0.5)，确保动画结束后保持正常大小 */
.nav-item.active .nav-icon-fill {
    opacity: 1;
    color: var(--color-primary);
    transform: scale(1);
}

/* === 个性化动画：每个图标独特的弹出方式 === */

/* 奖杯：从底部弹出上浮（transform-origin: 底部中心） */
.nav-item.active .nav-icon-trophy .nav-icon-fill {
    transform-origin: 50% 100%;
    animation: nav-trophy-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nav-trophy-pop {
    0% {
        transform: scale(0.3) translateY(6px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 星星：旋转脉冲（transform-origin: 中心） */
.nav-item.active .nav-icon-star .nav-icon-fill {
    transform-origin: 50% 50%;
    animation: nav-star-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nav-star-pop {
    0% {
        transform: scale(0.3) rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* 火焰：弹出 + 持续跳动（transform-origin: 底部中心）
   fire-pop forwards 保持终态，fire-dance 0.5s 后接管无限跳动 */
.nav-item.active .nav-icon-fire .nav-icon-fill {
    transform-origin: 50% 100%;
    animation:
        nav-fire-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        nav-fire-dance 2.2s ease-in-out 0.5s infinite;
}

@keyframes nav-fire-pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes nav-fire-dance {
    0%,
    100% {
        transform: scale(1) skewX(0deg);
    }
    25% {
        transform: scale(1.06) skewX(-3deg);
    }
    75% {
        transform: scale(1.06) skewX(3deg);
    }
}

/* 折线：从左侧描画弹出（transform-origin: 左侧中心） */
.nav-item.active .nav-icon-chart .nav-icon-fill {
    transform-origin: 0% 50%;
    animation: nav-chart-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nav-chart-pop {
    0% {
        transform: scale(0.2, 0.6) translateX(-6px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

/* 邮件：从右侧滑入（信封投递） */
.nav-item.active .nav-icon-mail .nav-icon-fill {
    transform-origin: 50% 50%;
    animation: nav-mail-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nav-mail-pop {
    0% {
        transform: scale(0.3) translateX(8px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

/* 喇叭：放大脉冲（广播播报） */
.nav-item.active .nav-icon-megaphone .nav-icon-fill {
    transform-origin: 0% 50%;
    animation: nav-megaphone-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nav-megaphone-pop {
    0% {
        transform: scale(0.2, 0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.15, 1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 网格：旋转弹出（四格翻转） */
.nav-item.active .nav-icon-grid .nav-icon-fill {
    transform-origin: 50% 50%;
    animation: nav-grid-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nav-grid-pop {
    0% {
        transform: scale(0.3) rotate(-45deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.nav-item.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* 点击反馈：图标轻微缩小 */
.nav-item:active .nav-icon {
    transform: scale(0.88);
}

/* PC 端 hover 效果 */
@media (hover: hover) and (pointer: fine) {
    .nav-item:hover {
        color: var(--color-primary);
    }

    .nav-item:hover .nav-icon {
        transform: scale(1.1);
    }

    .nav-item:hover:not(.active) .nav-icon-line {
        opacity: 0.35;
    }

    .nav-item:hover:not(.active) .nav-icon-fill {
        opacity: 0.65;
        transform: scale(1);
    }
}

/* 浮动按钮包装容器：与 .tts-btn-main 完全一致的单层玻璃拟态
   原 implementation 是双层（外层渐变蓝 + 内层白玻璃），
   现统一为单层 multi-layer background，与播放按钮视觉完全一致 */
.float-btn-wrapper {
    position: fixed;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* 与 .tts-btn-main 相同的三层 background 配方 */
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-primary-dark, #5568d3) 100%);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 24px rgba(102, 126, 234, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s;
}

.scroll-top-wrapper {
    bottom: 70px;
}

/* 内层按钮：透明覆盖层，仅承载图标和点击事件
   背景和边框由外层 .float-btn-wrapper 提供 */
.scroll-top-btn,
.refresh-btn {
    position: relative;
    background: transparent;
    color: var(--color-text-on-primary);
    border: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-top-btn i,
.refresh-btn i {
    font-size: var(--em-130);
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.float-btn-wrapper:hover {
    transform: scale(1.1) translateY(-3px);
    /* hover 时三层 background 显式保持，避免被覆盖 */
    background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-primary-dark, #5568d3) 100%);
    box-shadow:
        0 14px 36px rgba(102, 126, 234, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}

/* 内层按钮不再单独设背景（透明） */
.float-btn-wrapper:hover .scroll-top-btn,
.float-btn-wrapper:hover .refresh-btn {
    background: transparent;
}

.scroll-top-btn:active,
.refresh-btn:active {
    transform: scale(0.92);
}

.refresh-btn:disabled {
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* 禁用态：外层 wrapper 降低饱和度 */
.refresh-wrapper:has(.refresh-btn:disabled),
.float-btn-wrapper:has(.refresh-btn:disabled) {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 55%), linear-gradient(135deg, #a8b2d8 0%, #9296c0 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.refresh-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.share-class-count {
    display: none;
    font-size: var(--fs-mini);
    color: var(--color-text-faint);
    margin-left: 4px;
    font-weight: 400;
}

/* fund-name：flex 布局，内所有元素垂直居中 */
.fund-name {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 3px;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.fund-name .holdings-toggle-hint,
.fund-name .share-class-count {
    flex-shrink: 0;
}

.fund-name .holdings-toggle-hint {
    vertical-align: baseline;
}

/* fund-code：基金公司名，与 fund-tags / share-classes 同行显示（fund-tags-row 内首个子元素） */
.fund-code {
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* fund-name 开头的收藏按钮（星标） */
.fav-btn {
    padding: 4px 2px;
    margin-left: 0px;
    margin-right: 3px;
    color: var(--color-text-disabled);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.15s,
        color 0.15s;
    font-size: var(--em-95);
    line-height: 1;
}

.fav-btn:active {
    transform: scale(0.85);
}

.fav-btn.active {
    color: var(--color-gold);
}

/* 基金卡片跳转到天天基金详情页的图标按钮（与 .holdings-toggle-hint 字号/颜色/粗细完全一致） */
/* margin-left:auto 把它和后面的 holdings-toggle-hint 一起推到 fund-name 行末右对齐 */
.fund-detail-link {
    font-size: var(--fs-subtitle);
    color: var(--color-text-disabled);
    flex-shrink: 0;
    padding: 2px;
    margin-left: auto;
    border-radius: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.12s,
        background 0.12s,
        transform 0.12s;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    font-weight: 400;
}
.fund-detail-link:active {
    color: var(--color-primary, #3d4fb0);
    background: var(--color-surface-tint);
    transform: scale(0.92);
}

/* search-box 内的"只看收藏"筛选按钮 */
.fav-filter-btn {
    border: none;
    border-left: 1px solid var(--color-border-input);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0 0 0 8px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--em-75);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

.fav-filter-btn:active {
    color: var(--color-text-primary);
}

.fav-filter-btn.active {
    color: var(--color-gold);
}

/* ============================================================
   基础组件公共样式（rankings / index 共享）
   ============================================================ */

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* 页面容器 */
/* PC 端放宽到 1600px，容纳收藏页 13+ 列表格；手机端受视口约束不受影响 */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

/* header-mode：header-top 右侧模式区（rankings 共享） */
.header-mode {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--em-75);
    margin-left: auto;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--em-75);
    margin-left: auto;
}

/* 工具栏行：mode-toggle + sort-btn 同行 */
.toolbar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
}

/* 模式切换 toggle 容器（iOS segmented control 风格：浅灰底 + 白色滑块滑动） */
.mode-toggle {
    display: flex;
    position: relative;
    background: var(--color-segment-bg);
    border-radius: var(--radius-lg);
    padding: 2px;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
    /* 默认贴合按钮宽度；设了 data-visible 的由 JS 用 max-width 约束 */
    width: fit-content;
    max-width: 100%;
    /* 支持横向拖拽：超出按钮可横向滚动，隐藏滚动条 */
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE10+ */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.mode-toggle::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
/* 拖拽时禁用 smooth，让跟手 */
.mode-toggle.dragging {
    scroll-behavior: auto;
}

/* iOS 滑块：玻璃质感（半透明 + 强模糊 + 高光描边）
   绝对定位，由 JS 自动移动到 active 按钮位置 */
.mode-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    background: var(--glass-slider-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: calc(var(--radius-lg) - 2px);
    box-shadow:
        var(--glass-slider-shadow),
        inset 0 1px 0 var(--glass-slider-highlight),
        inset 0 0 0 0.5px var(--glass-slider-border);
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.15s ease;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}
.mode-slider[style*="width"] {
    opacity: 1;
}

.mode-btn {
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition:
        color 0.3s,
        transform 0.15s;
    white-space: nowrap;
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
}

.mode-btn.active {
    background: transparent;
    color: var(--color-text-primary);
    font-weight: 500;
}

.mode-btn:active {
    transform: scale(0.96);
}

/* PC 端滑块增强：拖拽时禁止选中文字 + 键盘聚焦时显示 outline */
@media (hover: hover) and (pointer: fine) {
    .mode-toggle,
    .weekly-tabs {
        user-select: none;
        -webkit-user-select: none;
    }
}
.mode-toggle:focus,
.weekly-tabs:focus {
    outline: none;
}
.mode-toggle:focus-visible,
.weekly-tabs:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* 拖拽中临时禁用过渡，让滑块跟随鼠标实时移动 */
.mode-toggle.dragging .mode-slider,
.weekly-tabs.dragging .weekly-slider {
    transition: none !important;
}

/* 排序按钮：玻璃态外圈 + 涨跌色图标
   direction 语义：desc=降序(涨幅在前)→红 / asc=升序(跌幅在前)→绿
   兼容旧 class：up=涨幅在前(红) / down=跌幅在前(绿) */
.sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: var(--glass-text);
    font-size: var(--fs-caption);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    font-weight: 600;
}

.sort-btn:active {
    transform: scale(0.95);
}

.sort-btn .sort-icon {
    font-size: var(--fs-subtitle);
    transition: color 0.2s;
}

/* 降序（涨幅在前）→ 红色图标 */
.sort-btn.sort-desc .sort-icon,
.sort-btn.up .sort-icon {
    color: var(--color-up);
}

/* 升序（跌幅在前）→ 绿色图标 */
.sort-btn.sort-asc .sort-icon,
.sort-btn.down .sort-icon {
    color: var(--color-down);
}

/* 纯图标圆形排序按钮（无文字 label），与其他 header 圆形按钮同尺寸 */
.sort-btn.icon-only {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.sort-btn.icon-only .sort-icon {
    font-size: 14px;
    line-height: 1;
}

/* 搜索框容器 */
.search-box {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 8px 14px;
    margin: 6px 0;
    border: 1px solid var(--color-border-input);
}

.search-box i {
    color: var(--color-text-tertiary);
    font-size: var(--fs-subtitle);
}

.search-box input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--fs-caption);
    margin: 0 8px;
    color: var(--color-text-primary);
}

.search-box input::placeholder {
    color: var(--color-text-placeholder);
}

.search-clear {
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: var(--em-105);
}

.search-clear:active {
    color: var(--color-text-secondary);
}

/* 排行榜列表 */
.ranking-list {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.ranking-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-bg);
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-item:active {
    background: var(--color-surface-alt);
}

.ranking-item.top1 {
    background: var(--rank-top1-bg);
}

.ranking-item.top2 {
    background: var(--rank-top2-bg);
}

.ranking-item.top3 {
    background: var(--rank-top3-bg);
}

.ranking-item.expanded .holdings-toggle-hint {
    transform: rotate(180deg);
}

/* 排名徽章：前3名金/银/铜配色 */
.rank-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-caption);
    font-weight: bold;
    margin-right: 10px;
    color: var(--color-text-on-primary);
    flex-shrink: 0;
}

.rank-badge.rank1 {
    background: var(--medal-gold);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.rank-badge.rank2 {
    background: var(--medal-silver);
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.rank-badge.rank3 {
    background: var(--medal-bronze);
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
}

.rank-badge.other {
    background: var(--medal-default);
    color: var(--color-text-secondary);
}

/* 基金信息区 */
.fund-info {
    flex: 1;
    min-width: 0;
}

/* —— 基金卡片标签组件（rankings / index 共享） —— */

/* 基金类型标签：QDII(蓝) / 国内(绿) */
.fund-type-tag {
    display: inline-block;
    font-size: var(--fs-mini);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    margin-left: 6px;
    vertical-align: middle;
}

.fund-type-tag.qdii {
    background: var(--tag-blue-bg);
    color: var(--color-info);
}

.fund-type-tag.domestic {
    background: var(--tag-green-bg);
    color: var(--color-down-dark);
}

/* 行业板块标签（可点击编辑：点击弹出模态框修改板块名） */
.sector-tag {
    display: inline-block;
    font-size: var(--fs-mini);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    margin-left: 3px;
    vertical-align: middle;
    background: var(--tag-purple-bg);
    color: var(--color-primary);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.12s ease,
        background 0.15s ease;
}

/* 按压反馈：移动端触摸时轻微缩放 */
.sector-tag:active {
    transform: scale(0.92);
}

/* 用户自定义板块标签：蓝色背景（最高优先级，用户手动设定） */
.sector-tag.sector-custom {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}

/* 持仓推断板块标签：橙色背景（基于十大持仓聚合占比，最准确） */
.sector-tag.sector-holding {
    background: var(--tag-orange-bg);
    color: var(--tag-orange-text);
}

/* 名称匹配板块标签：青色背景（基于基金名称字典匹配，兜底） */
.sector-tag.sector-name {
    background: var(--tag-cyan-bg);
    color: var(--tag-cyan-text);
}

/* 持仓接口自动推断板块标签：红色背景（API兜底，可点击修正） */
.sector-tag.sector-api {
    background: var(--tag-red-bg);
    color: var(--tag-red-text);
}

/* ===== 板块编辑模态框（iOS 风格，点击 sector-tag 弹出）===== */
.sector-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

/* 遮罩：半透明 + 毛玻璃模糊 */
.sector-editor-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}

/* 卡片：居中，iOS 风格圆角，弹性弹出动画 */
.sector-editor-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 头部：左"恢复默认" / 中标题 / 右基金代码 */
.sector-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}

.sector-editor-reset {
    font-size: var(--fs-12);
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-width: 56px;
}

.sector-editor-reset:active {
    opacity: 0.5;
}

.sector-editor-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--color-text-primary);
}

.sector-editor-code {
    font-size: var(--fs-12);
    color: var(--color-text-tertiary);
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 输入框：无阴影聚焦（符合用户偏好），iOS 风格圆角 */
.sector-editor-input {
    display: block;
    width: calc(100% - 32px);
    margin: 0 15px 0 15px;
    padding: 10px 12px;
    font-size: var(--fs-15);
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.15s ease;
}

.sector-editor-input:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.sector-editor-input::placeholder {
    color: var(--color-text-placeholder);
}

/* 板块标签云容器：可滚动，隐藏滚动条（与项目整体风格一致） */
.sector-editor-suggestions {
    max-height: 150px;
    overflow-y: auto;
    padding: 8px 15px 8px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sector-editor-suggestions::-webkit-scrollbar {
    display: none;
}

/* 单个板块标签：小胶囊，浅色背景，点击填入输入框 */
.sector-suggestion-chip {
    display: inline-block;
    padding: 4px 10px;
    font-size: var(--fs-13);
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.sector-suggestion-chip:active {
    background: var(--tag-purple-bg);
    color: var(--color-primary);
    border-color: var(--color-primary-light);
    transform: scale(0.94);
}

/* 历史选择标签：用户最近保存过的板块，浅蓝背景 + 左侧蓝色小点指示器 */
.sector-suggestion-chip.recent {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
    border-color: rgba(25, 118, 210, 0.25);
    padding-left: 8px;
    position: relative;
}
.sector-suggestion-chip.recent::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 5px;
    vertical-align: middle;
}
.sector-suggestion-chip.recent:active {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
    border-color: var(--color-primary);
}

/* 底部按钮：横排，iOS 风格分隔线 */
.sector-editor-actions {
    display: flex;
    border-top: 1px solid var(--color-border-light);
}

.sector-editor-btn {
    flex: 1;
    padding: 13px 0;
    font-size: var(--fs-16);
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease;
}

.sector-editor-btn:active {
    background: var(--color-bg);
}

.sector-editor-btn.cancel {
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-border-light);
}

.sector-editor-btn.confirm {
    color: var(--color-primary);
    font-weight: 600;
}

.sector-editor-btn.confirm:disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* 遮罩淡入 */
@keyframes sector-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 卡片弹性弹出 */
@keyframes sector-pop-in {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 连续涨跌天数标签（连涨红/连跌绿，与涨跌配色一致） */
.streak-tag {
    display: inline-block;
    font-size: var(--fs-mini);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    margin-left: 3px;
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
}

.streak-tag.up {
    background: var(--tag-red-bg);
    color: var(--color-up);
}

.streak-tag.down {
    background: var(--tag-green-bg);
    color: var(--color-down);
}

/* 持仓匹配标签：通过持仓股票搜索命中的基金，橙色区分于紫色板块标签 */
.holding-match-tag {
    display: inline-block;
    font-size: var(--fs-mini);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    margin-left: 3px;
    vertical-align: middle;
    background: var(--tag-orange-bg);
    color: var(--color-warning);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* fund-tags + share-classes 同一行，垂直居中（适配手机端）
   margin-top: 0 —— 三行间距统一由 fund-name/fund-code 的 margin-bottom: 3px 控制 */
.fund-tags-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
    min-width: 0;
}

.fund-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.fund-tags .sector-tag,
.fund-tags .streak-tag,
.fund-tags .holding-match-tag {
    margin-left: 0;
    flex-shrink: 0;
}

/* 份额标签：A/C/D 等份额标识，按字母升序排列 */
.share-classes {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: var(--fs-caption);
}

/* 份额类别项：字母（主色粗体）+ 免赎回费天数（绿色小字），参照 holdings-estimates 风格 */
.share-class-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.share-class-letter {
    color: var(--color-primary);
    font-weight: 600;
}
.share-class-fee {
    color: var(--tag-green-text);
    font-size: var(--fs-mini);
    white-space: nowrap;
}

/* fund-estimation-label：rec-metrics 风格（标签灰 + 值涨红跌绿），单行横向滚动不换行 */
.fund-estimation-label {
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 3px 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-light);
    line-height: 1.45;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fund-estimation-label::-webkit-scrollbar {
    display: none;
}

.fund-estimation-label .metric-item {
    flex-shrink: 0;
}

/* metric-item：通用指标项（标签灰 + 值涨红跌绿），fund-estimation-label / rec-metrics 共用 */
.metric-item {
    font-size: var(--fs-caption);
    color: var(--color-text-secondary);
}

.metric-item .metric-label {
    color: var(--color-text-tertiary);
    margin-right: 2px;
}

.metric-item .metric-val.positive {
    color: var(--color-up);
    font-weight: 500;
}

.metric-item .metric-val.negative {
    color: var(--color-down);
    font-weight: 500;
}

.estimation-time {
    font-size: var(--em-62);
    color: var(--color-text-quaternary);
    margin-top: 1px;
}

/* 展开提示图标（展开时旋转180度） */
.holdings-toggle-hint {
    font-size: var(--fs-subtitle);
    color: var(--color-text-disabled);
    margin-left: 4px;
    transition: transform 0.2s;
    display: inline-block;
    line-height: 1;
    font-weight: 400;
}

/* 估值区：与 fund-info 并排显示（右侧），fund-estimation-label 单独换行 */
.fund-estimation {
    text-align: right;
    flex-shrink: 0;
    margin-left: 3px;
    align-self: center;
    min-width: 65px;
}

.estimation-value {
    font-size: var(--fs-title);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.estimation-value.positive {
    color: var(--color-up);
}

.estimation-value.negative {
    color: var(--color-down);
}

/* 持仓详情面板：点击基金项展开，显示重仓明细 */
.holdings-panel {
    flex-basis: 100%;
    margin-top: 8px;
    padding: 6px 0 2px;
    border-top: 1px dashed var(--color-border);
    display: none;
}

.holdings-panel.expanded {
    display: block;
}

.holdings-loading {
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--em-78);
    padding: 14px 0;
}

.holdings-empty {
    text-align: center;
    color: var(--color-text-placeholder);
    font-size: var(--em-76);
    padding: 12px 0;
}

.holdings-title {
    font-size: var(--em-70);
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
    padding: 0 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 标题首项（图标+文字）：inline-flex 让图标与文字垂直居中对齐，避免图标下偏 */
.holdings-title > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.holdings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--em-78);
}

.holdings-table th {
    text-align: center;
    color: var(--color-text-faint);
    font-weight: 500;
    padding: 4px 6px;
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
}

.holdings-table th.num,
.holdings-table td.num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.holdings-table td {
    text-align: center;
    padding: 5px 6px;
    border-bottom: 1px solid var(--color-border-lighter);
    color: var(--color-text-primary);
}

.holdings-table td.stock-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.holdings-table td.stock-info .stock-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.holdings-table td.stock-info .stock-code {
    color: var(--color-text-tertiary);
    font-size: var(--em-75);
}

/* 板块标签：科创板/创业板/主板 */
.board-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 4px;
    font-size: var(--em-75);
    font-weight: 500;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.2;
}
.board-tag.board-sh {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.board-tag.board-sz {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}
.board-tag.board-bj {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
}
.board-tag.board-cy {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.board-tag.board-kc {
    background: rgba(102, 126, 234, 0.12);
    color: #667eea;
}
.board-tag.board-default {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.holdings-table td.up {
    color: var(--color-up);
}

.holdings-table td.down {
    color: var(--color-down);
}

.holdings-table tr:last-child td {
    border-bottom: none;
}

/* 持仓面板统一摘要区：基金全称 + 估值/夏普指标行合并为一个区块 */
.holdings-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

/* 基金全称项：允许换行（全称文字较长），字号字重与其他指标一致 */
.holdings-metrics-card .metric-name-item {
    white-space: normal;
    word-break: break-all;
}
/* 基金代码：与全称同字号字重，颜色弱化区分 */
.holdings-metrics-card .metric-code {
    color: var(--color-text-tertiary);
}
/* 免赎回费：与全称同字号字重 */
.holdings-metrics-card .metric-fee {
    color: var(--color-primary);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-variant-east-asian: full-width;
    white-space: nowrap;
}
.holdings-metrics-card .metric-fee-unit {
    color: var(--color-text-tertiary);
    font-weight: 400;
}

/* 指标组容器：横向排列各分组卡片，窄屏自动换行 */
.holdings-metrics-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 单个指标分组卡片：纵向堆叠各 metric-row，行间虚线分隔 */
.holdings-metrics-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    flex: 1 1 100%;
}

.holdings-metrics-card .metric-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--em-70);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    /* 行内三等分：每项均分宽度 */
    flex: 1 1 0;
    min-width: 0;
}
/* 卡内子分组行：三等分横向排列，item 间竖线分隔 */
.holdings-metrics-card .metric-row {
    display: flex;
    align-items: baseline;
    padding-bottom: 4px;
    gap: 0;
}
/* item 间竖线分隔（首项不加） */
.holdings-metrics-card .metric-row .metric-item + .metric-item {
    border-left: 1px dashed var(--color-border);
    padding-left: 10px;
}
.holdings-metrics-card .metric-row .metric-item:first-child {
    padding-left: 0;
}
/* 单 item 行（全称行）占满整行，不三等分 */
.holdings-metrics-card .metric-row-full .metric-item {
    flex: 1 1 100%;
}
/* 排名行：item 间无竖线，保留三等分 */
.holdings-metrics-card .metric-row-nosep .metric-item + .metric-item {
    border-left: none;
    padding-left: 0;
}
/* 行间虚线分隔（最后一行不加） */
.holdings-metrics-card .metric-row:not(:last-child) {
    border-bottom: 1px dashed var(--color-border);
}
/* 业绩表现卡顶满宽度 */
.holdings-metrics-card.card-perf {
    flex: 1 1 100%;
}
.holdings-metrics-card .metric-label {
    font-weight: 500;
    color: var(--color-text-secondary);
}
.holdings-metrics-card .metric-val {
    font-style: normal;
    font-weight: 400;
    /* 数字等宽 + 东亚字符全角对齐，让数字/字母与汉字占相同宽度 */
    font-variant-numeric: tabular-nums;
    font-variant-east-asian: full-width;
    color: var(--color-text-primary);
}
.holdings-metrics-card .metric-val.up {
    color: var(--color-up, #e74c3c);
}
.holdings-metrics-card .metric-val.down {
    color: var(--color-down, #2ecc71);
}
.holdings-metrics-card .metric-val.sharp-excellent {
    color: var(--tag-gold-text);
}
.holdings-metrics-card .metric-val.sharp-normal {
    color: var(--color-primary);
}
.holdings-metrics-card .metric-val.sharp-poor {
    color: var(--color-down);
}
/* 星级评级：≥3星金色，<3星绿色 */
.holdings-metrics-card .metric-val.star-gold {
    color: var(--tag-gold-text, #d4a017);
    letter-spacing: 1px;
}
.holdings-metrics-card .metric-val.star-green {
    color: var(--color-down, #2ecc71);
    letter-spacing: 1px;
}
.holdings-metrics-card .metric-time {
    color: var(--color-text-quaternary, #999);
    font-size: var(--em-85);
}
/* QDII 重算估值对比小字：与数据源原值差异 > 0.5% 时展示 */
.holdings-metrics-card .metric-compare {
    color: var(--color-text-quaternary, #999);
    font-size: var(--em-70);
    margin-left: 4px;
    padding-left: 4px;
    border-left: 1px dashed var(--color-border);
}

.holdings-share-classes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--em-70);
    color: var(--color-text-tertiary);
    margin-bottom: 6px;
    padding: 4px 6px;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-xs);
}

.holdings-share-classes .share-classes-label {
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* 份额标签组：A/C/D 按字母升序排列，复用 .share-classes / .share-class-tag 样式 */
.holdings-share-classes .share-classes {
    font-size: var(--em-100);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}

/* 加载与错误状态 */
.loading {
    text-align: center;
    padding: 50px 20px;
    color: var(--color-text-tertiary);
}

.spinner {
    border: 3px solid var(--color-loading-border);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.error-message {
    background: var(--tag-red-bg);
    color: var(--color-up-dark);
    padding: 15px;
    border-radius: var(--radius-sm);
    margin: 15px;
    text-align: center;
    font-size: var(--em-90);
}

.empty-state {
    text-align: center;
    padding: 15px;
    color: var(--color-text-tertiary);
    /* 撑满 header 以下的可用区域（视口减去 header + bottom-nav + container padding） */
    min-height: calc(100vh - 301px);
    min-height: calc(100dvh - 301px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* 搜索加载中：spinner + 文案，居中显示 */
.empty-state .spinner {
    margin: 0;
}

/* 刷新遮罩 */
#content.refreshing {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* 全局加载文案（GlobalLoading 动态创建的 .loading 元素内文本） */
.gl-loading-text {
    margin: 12px auto 0;
    font-size: var(--em-90);
    color: var(--color-text-tertiary);
    text-align: center;
    max-width: 80vw;
    word-break: break-all;
}

/* GlobalLoading 全屏模式（默认）：居中大 spinner + 文案 */
.gl-loading.gl-loading-full {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* GlobalLoading 内联模式：紧凑横向 spinner + 文案，追加到容器底部（分页加载更多） */
.gl-loading.gl-loading-inline {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
}
.gl-loading.gl-loading-inline .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin: 0;
}
.gl-loading.gl-loading-inline .gl-loading-text {
    margin: 0;
    font-size: var(--fs-caption, 0.8rem);
}

/* PC端布局：估值列与基金信息并排显示 */
/* @media (hover: hover) and (pointer: fine) {
    .sort-btn:hover {
        background: var(--color-bg);
    }

    .fund-estimation {
        min-width: 90px;
    }
} */

/* ============================================================
   Header 内工具栏公共玻璃体样式（rankings / index 共享）
   通过 .header .xxx 高特异性覆盖上方基础组件样式，实现深色 header
   背景上的玻璃体视觉（半透明 + blur + 内高光 + 阴影）。
   ============================================================ */

/* —— 搜索框容器（rankings 的 .search-box）—— */
.header .search-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    margin: 12px 0 0;
}

.header .search-box i {
    color: var(--glass-text-secondary);
}

.header .search-box input {
    color: var(--color-text-on-primary);
}

.header .search-box input::placeholder {
    color: var(--glass-text-secondary);
}

.header .search-clear {
    color: var(--glass-text-secondary);
}

.header .search-clear:active {
    color: var(--color-text-on-primary);
}

/* —— 搜索输入框（index 的 .search-input）—— */
.header .search-input {
    background: var(--glass-bg);
    color: var(--color-text-on-primary);
    border-color: var(--glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.header .search-input::placeholder {
    color: var(--glass-text-secondary);
}

.header .search-input:focus {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
}

/* —— 排序按钮 —— */
.header .sort-btn {
    background: var(--glass-bg);
    color: var(--color-text-on-primary);
    border-color: var(--glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.header .sort-btn:active {
    background: var(--glass-bg-active);
}

/* —— 收藏筛选按钮 —— */
.header .fav-filter-btn {
    border-left-color: var(--glass-border);
    color: var(--glass-text-secondary);
}

.header .fav-filter-btn:active {
    color: var(--color-text-on-primary);
}

.header .fav-filter-btn.active {
    color: var(--color-gold);
}

/* —— 工具栏行 —— */
.header .toolbar-row {
    margin: 10px 0 0;
}

/* —— 模式切换 toggle（header 内玻璃风格：半透明容器 + 白色滑块滑动）—— */
.header .mode-toggle {
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.header .mode-btn {
    color: var(--glass-text);
}

.header .mode-btn.active {
    /* active 时透明背景让滑块可见，文字用主题深蓝（在白滑块上） */
    background: transparent;
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* header 内滑块：与 .mode-slider 共用玻璃质感变量
   在 header 渐变背景上，半透明 + 强模糊让颜色透出，玻璃感最强 */
.header .mode-slider {
    /* header 内额外加一层投影让滑块更"浮起" */
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.22),
        0 0 0 0.5px var(--glass-slider-border),
        inset 0 1px 0 var(--glass-slider-highlight);
}

/* —— 基金范围开关（纯图标圆形按钮，复用 source-toggle 玻璃态，与 io-btn 同风格）—— */
.header .overseas-toggle {
    font-size: var(--fs-caption);
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    color: var(--glass-text);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.header .overseas-toggle i {
    font-size: 14px;
    line-height: 1;
}

.header .overseas-toggle:active {
    transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
    .header .overseas-toggle:hover {
        opacity: 0.9;
    }
}

/* —— 数量输入框（玻璃边框在 wrapper 上，"条"作为后缀在框内）—— */
.header .limit-input-wrapper {
    border-color: var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.header .limit-input-wrapper:focus-within {
    border-color: var(--glass-border-strong);
    background: var(--glass-bg-hover);
}

.header .limit-input-wrapper input {
    color: var(--color-text-on-primary);
}

.header .limit-input-wrapper input::placeholder {
    color: var(--glass-text-tertiary);
}

.header .limit-label {
    color: var(--glass-text-secondary);
}

/* ============================================================
   rankings 页面独有样式（body 用 .page-rankings 限定 flex 布局）
   ============================================================ */

/* rankings 页面布局：block 布局（不用 flex column，否则 container 的 margin:0 auto 会
   让 align-items:stretch 失效，导致 container 宽度收缩成 fit-content 而非铺满 body） */
.page-rankings {
    min-height: 100vh;
}

.page-rankings .header {
    flex-shrink: 0;
}

.page-rankings .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* #content 撑满 container 主轴，并作为 flex 容器让 ranking-list 撑满
   min-width: 0 同样关键：作为 .container（flex 容器）的子元素，
   默认 min-width: auto 会阻断 ranking-list 的压缩链，导致整个布局横向溢出 */
.page-rankings #content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* .hidden 优先级补丁：#content 初始带 .hidden 时必须隐藏。
   因 .page-rankings #content 的 display:flex 特异性(1,1,0)高于 .hidden(0,1,0) 会覆盖，
   导致加载中 .ranking-list 白色卡片提前显示，看起来像"白色外框" */
.page-rankings #content.hidden {
    display: none;
}

/* ranking-list 撑满 #content：空状态时白色背景占满可用区域，有数据时自然撑开
   min-width: 0 是关键：作为 #content（column flex 容器）的 flex 子元素，
   默认 min-width: auto（= min-content）会被最宽的 ranking-item 撑宽，
   导致整个列表横向溢出。设 0 后才能让内部 fund-info / fund-name 的
   min-width: 0 压缩链真正生效 */
.page-rankings .ranking-list {
    flex: 1;
    min-width: 0;
}

/* 空状态/加载中：去掉白色圆角卡片背景，直接在页面背景上显示（对齐首页 .loading 样式） */
.page-rankings .ranking-list.empty {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* 无限滚动底部加载指示器已统一到 .is-loader（InfiniteScroll 公共组件），.scroll-loader / .scroll-end 类已废弃删除 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 业绩/收盘周期选择器：复用 mode-toggle 滑块机制，横向滚动不换行 */
.period-selector,
.closing-period-selector {
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.period-selector::-webkit-scrollbar,
.closing-period-selector::-webkit-scrollbar {
    display: none;
}

/* 免赎回费筛选切换组（仿 mode-toggle，按钮过多时横向滚动不换行） */
.fee-filter-toggle {
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
}
/* 连涨连跌筛选切换组：按钮较多（7 个），横向滚动不换行，与周期选择器风格一致 */
.streak-filter-toggle {
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.streak-filter-toggle::-webkit-scrollbar {
    display: none;
}

.period-selector .mode-btn,
.closing-period-selector .mode-btn {
    font-size: var(--fs-caption);
    padding: 6px 12px;
}

/* 数量输入框（玻璃体覆盖见上方 .header .limit-input-wrapper） */
.limit-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s;
}

.limit-input-wrapper:focus-within {
    border-color: var(--color-primary);
}

.limit-input-wrapper input {
    width: 52px;
    padding: 6px 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: var(--fs-caption);
    text-align: center;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.limit-label {
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    padding-right: 8px;
}

/* 基金范围开关按钮：三态切换 全部(蓝)/A股(灰)/海外(灰)
   玻璃体覆盖见上方 .header .overseas-toggle */
.overseas-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-text-tertiary);
    font-size: var(--fs-caption);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

.overseas-toggle i {
    font-size: var(--fs-subtitle);
}

.overseas-toggle:active {
    transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
    .overseas-toggle:hover {
        opacity: 0.9;
    }
}

/* —— 估值源切换按钮（与 overseas-toggle 同风格，header 玻璃态）—— */
.header .source-toggle {
    font-size: var(--fs-caption);
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    font-weight: 600;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    background: var(--glass-bg);
    color: var(--glass-text);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.header .source-toggle:active {
    transform: scale(0.95);
}

.header .source-toggle i {
    font-size: var(--fs-subtitle);
}

@media (hover: hover) and (pointer: fine) {
    .header .source-toggle:hover {
        opacity: 0.9;
    }
}

/* —— 导入/导出按钮：复用 source-toggle 玻璃态，纯图标圆形，与 overseas-toggle 同尺寸 —— */
.header .source-toggle.io-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
}

.header .source-toggle.io-btn i {
    font-size: 14px;
    line-height: 1;
}

/* 邮件按钮：复用 io-btn 玻璃态，发送中旋转 + 禁用 */
.header .mail-btn.sending {
    opacity: 0.6;
    pointer-events: none;
}
.mail-btn .mail-spin {
    animation: mail-spin 0.9s linear infinite;
}
@keyframes mail-spin {
    to {
        transform: rotate(360deg);
    }
}

/* source-selector-modal：参考 sector-editor-modal 范式（iOS 风格 + 弹簧动画） */
.source-selector-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.source-selector-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}

.source-selector-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.source-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}

.source-selector-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
    text-align: center;
}

.source-option-test {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--fs-12);
    padding: 3px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}
.source-option-test:active {
    background: var(--color-surface-sunken);
    transform: scale(0.95);
}
.source-option-test.testing {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}
.source-option-test.testing::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: source-test-spin 0.6s linear infinite;
}
@keyframes source-test-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   全局弹框加载样式（统一：上下左右居中，动画在上、文字在下）
   所有弹框内的加载态都用 .modal-loading（含子元素 .modal-loading-text）
   兼容旧类名 .source-selector-loading / .ocr-loading / .holdings-loading
   ============================================================ */
.modal-loading,
.source-selector-loading,
.ocr-loading,
.holdings-modal .holdings-loading {
    padding: 36px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-tertiary);
    font-size: var(--fs-13);
    text-align: center;
}

.modal-loading .spinner,
.source-selector-loading .spinner,
.ocr-loading .spinner,
.holdings-modal .holdings-loading .spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0;
    flex-shrink: 0;
}

.modal-loading-text,
.ocr-loading-text {
    font-size: var(--fs-13);
    line-height: 1.6;
    color: var(--color-text-tertiary);
}

.ocr-loading-elapsed {
    font-size: var(--em-80);
    color: var(--color-text-quaternary);
    margin-top: -4px;
}

.source-selector-list {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.source-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.source-option.selected {
    border-color: var(--color-primary);
    background: var(--tag-purple-bg);
}

/* 基金范围弹框：选中态不加背景，仅保留 radio 圆点高亮 */
#fundScopeModal .source-option,
#fundScopeModal .source-option.selected {
    background: transparent;
    border-color: var(--color-border);
}

.source-option:active {
    transform: scale(0.98);
}

.source-option-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.source-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s;
}

.source-option.selected .source-radio {
    border-color: var(--color-primary);
}

.source-option.selected .source-radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.source-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.source-option-name {
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.source-option-name i {
    font-size: var(--fs-subtitle);
    color: var(--color-primary);
}

.source-option-status {
    font-size: var(--fs-11);
    color: var(--color-text-tertiary);
}

.source-option-status.ok {
    color: var(--color-down);
}

.source-option-status.warn {
    color: var(--color-warning);
}

.source-option-status.err {
    color: var(--color-up);
}

.source-option-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.source-option-value {
    font-size: var(--fs-14);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.source-option-value.up {
    color: var(--color-up);
}

.source-option-value.down {
    color: var(--color-down);
}

.source-option-time {
    font-size: var(--fs-10);
    color: var(--color-text-tertiary);
}

.source-selector-actions {
    display: flex;
    border-top: 1px solid var(--color-border-light);
}

.source-selector-btn {
    flex: 1;
    padding: 13px 0;
    font-size: var(--fs-16);
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease;
}

.source-selector-btn:active {
    background: var(--color-bg);
}

.source-selector-btn.cancel {
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-border-light);
}

.source-selector-btn.confirm {
    color: var(--color-primary);
    font-weight: 600;
}

.source-selector-btn.confirm:disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* source-pref-modal 专属样式（复用 source-selector-modal 容器） */
.source-pref-subtitle {
    padding: 0 16px 8px;
    font-size: var(--fs-12);
    color: var(--color-text-tertiary);
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
}
.source-pref-code {
    color: var(--color-text-quaternary);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.source-pref-badge {
    display: inline-block;
    font-size: var(--fs-10);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    margin-left: 4px;
    font-weight: 500;
    vertical-align: middle;
    line-height: 1.4;
}
.source-pref-badge.user {
    background: var(--tag-purple-bg, rgba(100, 80, 200, 0.1));
    color: var(--color-primary);
}
.source-pref-badge.current {
    background: var(--color-surface-tint);
    color: var(--color-text-tertiary);
}
/* 估值源行：可点击样式 */
.metric-item-source {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
    align-items: center !important; /* 覆盖 metric-item 的 baseline，让箭头与文字垂直居中 */
}
.metric-item-source:active {
    opacity: 0.6;
}
.metric-source-val {
    color: var(--color-primary);
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.metric-source-arrow {
    color: var(--color-text-tertiary);
    font-size: var(--fs-14);
    margin-left: 1px;
    line-height: 1;
}
/* toast 提示 */
.source-pref-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: var(--fs-13);
    z-index: 10001;
    opacity: 0;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    max-width: 80vw;
    text-align: center;
    line-height: 1.5;
}
.source-pref-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* est-source-tag：基金行内显示估值源小标签 */
.est-source-tag {
    display: inline-block;
    font-size: var(--em-60);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    margin-left: 3px;
    background: var(--color-surface-sunken);
    color: var(--color-text-tertiary);
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================================
   index 页面独有样式
   ============================================================ */

/* index 的 header-top 下方需额外间距（连接 indices-bar） */
.page-index .header-top {
    margin-bottom: 14px;
}

/* 指数栏 */
.indices-bar {
    background: var(--color-surface);
    padding: 15px;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.index-item {
    text-align: center;
    flex: 1;
}

.index-name {
    font-size: var(--fs-caption);
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}

.index-price {
    font-size: var(--fs-title);
    font-weight: bold;
    color: var(--color-text-primary);
    margin-bottom: 3px;
}

.index-change {
    font-size: var(--fs-subtitle);
    font-weight: 600;
}

/* 涨跌颜色（通用：.estimation-value.positive 等高特异性规则不受影响，
   此处供 .index-change 等独立使用） */
.positive {
    color: var(--color-up);
}

.negative {
    color: var(--color-down);
}

/* fund-name-text：基金名称截断容器 */
.fund-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

/* holdings-count：基金代码后的持仓数量标签 */
.holdings-count {
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    background: var(--color-surface-sunken);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-left: 6px;
}

/* ============================================================
   通用模式徽章样式
   ============================================================ */

/* 模式徽章：分析中 / 已完成 */
.mode-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-md);
    font-size: var(--fs-caption);
    font-weight: 600;
    white-space: nowrap;
    background: var(--glass-bg-hover);
    color: var(--color-text-on-primary);
}

/* 分析摘要卡片 */
.analysis-summary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
}

.analysis-summary .summary-title {
    font-size: var(--fs-subtitle);
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.analysis-summary .summary-desc {
    font-size: var(--fs-caption);
    opacity: 0.9;
    line-height: 1.5;
}

.analysis-summary .summary-meta {
    font-size: var(--fs-caption);
    opacity: 0.8;
    margin-top: 6px;
}

/* 区块标题 */
.section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-subtitle);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 14px 0 8px;
    padding: 0 2px;
}

.section-header i {
    color: var(--color-primary);
    font-size: var(--fs-title);
}

/* —— tab 切换 toggle（index 的 .tab-bar，与 mode-toggle 风格一致）—— */
.header .tab-bar {
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    margin: 10px 0 0;
}

.header .tab {
    color: var(--glass-text);
}

.header .tab.active {
    background: var(--glass-slider-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--color-primary-dark);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 var(--glass-slider-highlight),
        inset 0 0 0 0.5px var(--glass-slider-border);
}

/* —— 指数栏（index 的 .indices-bar，移入 header 后适配深色背景）—— */
.header .indices-bar {
    background: var(--glass-bg-faint);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-md);
    padding: 12px 15px;
    margin-top: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.header .index-name {
    color: var(--glass-text-secondary);
}

.header .index-price {
    color: var(--color-text-on-primary);
}

/* —— PC 端 hover 效果（移动端用 :active，避免误触）—— */
@media (hover: hover) and (pointer: fine) {
    .header .sort-btn:hover {
        background: var(--glass-bg-hover);
    }

    .header .mode-btn:hover {
        background: var(--glass-bg-faint);
    }

    .header .mode-btn.active:hover {
        color: var(--color-primary-dark);
    }

    .header .tab:hover {
        background: var(--glass-bg-faint);
    }

    .header .tab.active:hover {
        background: var(--glass-bg-strong);
    }
}

/* ============================================================
   收藏页 - 固定列表格（favorites.html 专用）
   设计要点：
   - 第一列"基金名称" sticky left，横向滚动时始终可见
   - 表头 sticky top，纵向滚动时始终可见
   - 固定列与滚动列通过 border + box-shadow 视觉分隔
   - 涨跌色与排行榜一致：红涨绿跌
   ============================================================ */

/* 表格容器：双向滚动 + 触摸流畅 + 限制高度避免顶到导航栏 */
.fav-table-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border); /* 外边框，让表格看起来有边界 */
    border-radius: var(--radius-md);
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS 平滑触摸滚动 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-height: calc(100dvh - 156px);
    max-height: calc(100vh - 156px);
    position: relative;
    min-width: 0; /* 关键：作为 flex 子元素，必须 min-width:0 才能被压缩，否则被 1120px 表格撑开导致 #content 超出屏幕 */
    scrollbar-width: thin; /* Firefox 滚动条美化 */
    scrollbar-color: var(--color-border) transparent;
}
/* 收藏页：左右留 margin 让圆角有呼吸空间，避免右侧圆角被屏幕边缘盖住 */
/* 滚动条外层化方案（方案 C）：
   - overflow-x: auto：表格横向溢出时在 wrapper 内部横向滚动（固定列 sticky 相对 wrapper）
   - overflow-y: clip：wrapper 不成为纵向滚动容器，内容自然撑高 wrapper，整页（body）纵向滚动接管
     thead sticky top:var(--fav-header-height) 相对 viewport 固定，滚动时表头始终可见
   - flex: 1 0 auto：短数据撑满 #content 无底部留白，长数据被内容撑开让 body 出现滚动条
   - max-height: none：不限高度（旧版 max-height 是给内部 Y 滚动用的，现在外层化了不需要）
   iOS Safari <16 不支持 overflow:clip，用 @supports 回退到内部 Y 滚动（见下方） */
.page-favorites .fav-table-wrapper {
    flex: 1 0 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: clip;
    max-height: none;
}
/* 旧浏览器回退（不支持 overflow:clip）：恢复为 wrapper 内部纵向滚动 + 限高 */
@supports not (overflow: clip) {
    .page-favorites .fav-table-wrapper {
        overflow-y: auto;
        max-height: calc(100vh - 156px);
    }
}

/* 横向滚动条美化：细而半透明，不抢视觉 */
.fav-table-wrapper::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
.fav-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.fav-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-quaternary);
}
.fav-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.fav-table {
    width: 100%;
    border-collapse: separate; /* 改为 separate 规避 sticky + collapse 边框闪烁 bug */
    border-spacing: 0;
    font-size: var(--em-95); /* 表格正文字体调大（原 0.78em 太小，再从 0.9em 提到 0.95em） */
    table-layout: fixed; /* 固定列宽，避免内容撑开 */
}

/* 默认列宽：90px，第一列 130px */
.fav-table th,
.fav-table td {
    width: 90px;
    min-width: 90px;
    padding: 12px 8px;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid var(--color-border-lighter); /* 垂直列分隔线 */
    border-bottom: 1px solid var(--color-border-lighter); /* 行间分隔线 */
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums; /* 等宽数字，对齐美观 */
}

/* 最右列（操作列）去掉 border-right，避免与 wrapper 外边框双线 */
.fav-table th:last-child,
.fav-table td:last-child {
    border-right: none;
}

/* ===== 最新涨幅/估算涨幅：主值+副行时间双行显示 ===== */
.fav-table .cell-pct {
    line-height: 1.3;
}
.fav-table .cell-time {
    font-size: var(--em-70);
    color: var(--color-text-tertiary);
    line-height: 1.2;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

/* ===== 操作列（删除按钮）===== */
.fav-table .action-col,
.fav-table .action-cell {
    width: 44px;
    min-width: 44px;
    text-align: center;
    padding: 8px 4px;
}

.fav-delete-btn {
    color: var(--color-text-quaternary);
    font-size: var(--em-100);
    padding: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.15s,
        transform 0.15s;
}

.fav-delete-btn:active {
    color: var(--color-up);
    transform: scale(0.9);
}

@media (hover: hover) and (pointer: fine) {
    .fav-delete-btn:hover {
        color: var(--color-up);
    }
}

/* ===== 列宽拖拽 handle ===== */
/* th 已 position:sticky，作为 .col-resize absolute 的定位参考 */
/* width 18px 扩大触摸区域（原 6px 手机端难触发），视觉指示线仍为 2px 窄条 */
.fav-table th .col-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    cursor: col-resize;
    user-select: none;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; /* 阻止浏览器拦截水平触摸，确保拖拽跟手 */
}

.fav-table th .col-resize::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: var(--color-border);
    opacity: 0;
    transition: opacity 0.15s;
}

.fav-table th:hover .col-resize::after {
    opacity: 0.6;
}

.fav-table th .col-resize:active::after {
    opacity: 1;
    background: var(--color-primary);
}

/* 拖拽中：禁用文本选择，统一光标 */
body.col-resizing,
body.col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ===== 列管理弹框（复用 sector-editor-modal 范式）===== */
.column-manager-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}
.column-manager-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}
.column-manager-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: var(--color-surface);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.column-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}
.column-manager-reset {
    font-size: var(--fs-12);
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-width: 56px;
}
.column-manager-reset:active {
    opacity: 0.5;
}
.column-manager-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--color-text-primary);
}
.column-manager-close {
    font-size: var(--fs-18);
    color: var(--color-text-tertiary);
    cursor: pointer;
    min-width: 56px;
    text-align: right;
    -webkit-tap-highlight-color: transparent;
}
.column-manager-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.column-manager-list::-webkit-scrollbar {
    display: none;
}
.column-manager-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.column-manager-item:active {
    background: var(--color-surface-alt);
}
.column-manager-item.disabled {
    opacity: 0.5;
}
.column-manager-item-grip {
    color: var(--color-text-quaternary);
    cursor: grab;
    font-size: var(--fs-16);
    padding: 6px 8px; /* 扩大触摸区域，手机端易触发拖拽 */
    margin-left: -8px; /* 抵消 padding，保持视觉位置不变 */
    flex-shrink: 0;
    touch-action: none; /* 阻止触摸时页面滚动，确保拖拽跟手 */
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.15s,
        transform 0.15s;
}
.column-manager-item-grip:active {
    cursor: grabbing;
    color: var(--color-primary);
    transform: scale(1.1);
}
.column-manager-item.disabled .column-manager-item-grip {
    cursor: not-allowed;
    opacity: 0.25;
}
.column-manager-item:hover:not(.disabled) .column-manager-item-grip {
    color: var(--color-text-secondary);
}
.column-manager-item-label {
    flex: 1;
    font-size: var(--fs-14);
    color: var(--color-text-primary);
}
.column-manager-item.hidden-item .column-manager-item-label {
    color: var(--color-text-tertiary);
}
.column-manager-checkbox {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-border);
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: var(--fs-13);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.column-manager-checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}
.column-manager-checkbox.disabled {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-on-primary);
    cursor: not-allowed;
}
.column-manager-footer {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--color-border-lighter);
}
.column-manager-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-14);
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.column-manager-btn:active {
    opacity: 0.6;
}
.column-manager-btn.cancel {
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    border: none;
}
.column-manager-btn.confirm {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
}

/* 列管理弹框内拖拽中的项 */
.column-manager-item.dragging {
    opacity: 0.55;
    background: var(--color-surface-tint);
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.column-manager-item.drop-target-top {
    box-shadow: inset 2px 0 0 var(--color-primary);
}
.column-manager-item.drop-target-bottom {
    box-shadow: inset -2px 0 0 var(--color-primary);
}

/* 最后一行去掉 border-bottom，避免与 wrapper 外边框双线 */
.fav-table tbody tr:last-child td {
    border-bottom: none;
}

.fav-table th {
    color: var(--color-text-secondary);
    font-weight: 600;
    background: var(--color-surface-alt);
    /* sticky th 的 border-bottom 用 box-shadow 模拟，避免 sticky 滚动时边框闪烁/丢失 */
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* ===== 可排序表头：点击切换升降序 ===== */
.fav-table th.sortable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: color 0.15s;
}

/* 文字 span 与 sort-caret-wrapper 都用 middle 对齐，确保两者垂直居中在同一行 */
.fav-table th.sortable > span {
    vertical-align: middle;
}
.sort-caret-wrapper {
    margin-top: 1.5px;
}

.fav-table th.sortable:active {
    color: var(--color-text-secondary);
}

/* 排序图标：仿 Element UI 双三角形（上=升序，下=降序）
   默认两三角形浅灰，激活时对应三角形染主色 */
.fav-table th.sortable .sort-caret-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3px;
    vertical-align: middle;
    width: 8px;
    height: 9px;
    position: relative;
    flex-shrink: 0;
}
.fav-table th.sortable .sort-caret {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    transition: border-color 0.2s;
}
.fav-table th.sortable .sort-caret.ascending {
    border-bottom: 4px solid var(--color-text-quaternary);
    top: 0;
}
.fav-table th.sortable .sort-caret.descending {
    border-top: 4px solid var(--color-text-quaternary);
    bottom: 0;
}
.fav-table th.sortable .sort-caret.ascending.active {
    border-bottom-color: var(--color-primary);
}
.fav-table th.sortable .sort-caret.descending.active {
    border-top-color: var(--color-primary);
}

/* 激活列表头：文字加深 */
.fav-table th.sortable.active {
    color: var(--color-primary);
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .fav-table th.sortable:hover:not(.active) {
        color: var(--color-text-secondary);
    }
}

/* ===== 表头 sticky（纵向）=====
   wrapper 内部纵向滚动时，thead 相对 wrapper 固定在顶部 */
.fav-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ===== 对比勾选列（最左侧固定列，36px） ===== */
.fav-table .check-cell {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--color-surface);
    box-shadow: inset -1px 0 0 var(--color-border);
}
.fav-table thead .check-cell {
    z-index: 6;
    background: var(--color-surface-alt);
    box-shadow:
        inset 0 -1px 0 var(--color-border),
        inset -1px 0 0 var(--color-border);
}
/* 勾选框：复用列管理弹窗 checkbox 视觉范式，独立类名避免冲突 */
.fav-row-checkbox {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: var(--fs-11);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.fav-row-checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}
.fav-row-checkbox:active {
    transform: scale(0.9);
}

/* ===== 固定列（第二列"基金名称"）sticky left: 36px（让位给 check 列） ===== */
.fav-table .col-fixed {
    width: 130px;
    min-width: 130px;
    text-align: center;
    position: sticky;
    left: 36px; /* check 列宽度 */
    z-index: 3;
    background: var(--color-surface);
    border-right: none;
    box-shadow:
        inset -1px 0 0 var(--color-border),
        6px 0 8px -6px rgba(0, 0, 0, 0.15);
}
.fav-table thead .col-fixed {
    z-index: 4;
    background: var(--color-surface-alt);
    box-shadow:
        inset 0 -1px 0 var(--color-border),
        inset -1px 0 0 var(--color-border),
        6px 0 8px -6px rgba(0, 0, 0, 0.15);
}

/* ===== 选中行高亮（对比勾选状态） ===== */
.fav-table tbody tr.fav-row.selected {
    background: var(--color-surface-tint);
}
.fav-table tbody tr.fav-row.selected .check-cell,
.fav-table tbody tr.fav-row.selected .col-fixed {
    background: var(--color-surface-tint);
}

/* ===== 行样式 ===== */
.fav-table tbody tr.fav-row {
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent; /* 去除移动端触摸高亮 */
}
.fav-table tbody tr.fav-row:active {
    background: var(--color-surface-alt);
}
.fav-table tbody tr.fav-row.expanded {
    background: var(--color-surface-tint);
}

/* ===== 持仓弹框（position:fixed 脱离表格，彻底不受横向滚动影响）=====
   参考 source-selector-modal / sector-editor-modal 范式：mask + card + 弹簧动画 */
.holdings-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}
.holdings-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: holdings-modal-mask-in 0.2s ease;
}
@keyframes holdings-modal-mask-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.holdings-modal-card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: holdings-modal-card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes holdings-modal-card-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 头部：基金名称 + 代码 + 关闭按钮 */
.holdings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-lighter);
    background: var(--color-surface-tint);
    flex-shrink: 0;
}
.holdings-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.holdings-modal-title {
    font-size: var(--em-100);
    font-weight: 600;
    color: var(--color-text-primary);
}
.holdings-modal-code {
    font-size: var(--em-72);
    color: var(--color-text-tertiary);
}
.holdings-modal-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.15s,
        background 0.15s;
    font-size: var(--em-110);
}
.holdings-modal-close:active {
    transform: scale(0.88);
    background: var(--color-border);
}

/* 板块行：板块标签 + 修改板块按钮 */
.holdings-modal-sector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-lighter);
    flex-shrink: 0;
}
.holdings-modal-sector-label {
    font-size: var(--em-76);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}
.holdings-modal-sector .sector-tag {
    margin: 0;
    font-size: var(--em-80);
}
/* 持仓金额按钮 + 修改板块按钮：同一操作按钮风格，持仓金额按钮靠右（margin-left:auto） */
.holdings-modal-holding-btn,
.holdings-modal-sector-edit {
    border: 1px solid var(--color-border-input);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--em-76);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    flex-shrink: 0;
}
.holdings-modal-holding-btn {
    margin-left: auto;
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    background: var(--tag-blue-bg);
}
.holdings-modal-holding-btn:active,
.holdings-modal-sector-edit:active {
    transform: scale(0.94);
    background: var(--color-surface-sunken);
}

/* 持仓信息卡片：持仓弹窗内展示持仓全貌，整卡可点击编辑 */
#holdingsHoldingCardWrap {
    flex-shrink: 0;
}
.holdings-holding-card {
    margin: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-surface-tint);
    border: 1px solid var(--color-border-lighter);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.holdings-holding-card:active {
    background: var(--color-surface-sunken);
    border-color: var(--color-border);
}
.holdings-holding-card.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    color: var(--color-text-tertiary);
    font-size: var(--em-82);
}
.holdings-holding-card.empty i {
    font-size: var(--em-120);
    color: var(--color-text-quaternary);
}
.holdings-holding-empty-btn {
    color: var(--color-primary);
    font-weight: 600;
}
.holdings-holding-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--em-76);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.holdings-holding-card-title i {
    margin-right: 4px;
}
.holdings-holding-edit-hint {
    font-size: var(--em-92);
    font-weight: 400;
    color: var(--color-text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.holdings-holding-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 6px;
}
.holdings-holding-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.holdings-holding-label {
    font-size: var(--em-68);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.holdings-holding-value {
    font-size: var(--em-86);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.holdings-holding-value.primary {
    color: var(--color-primary-dark);
}
.holdings-holding-value.up {
    color: var(--color-up);
}
.holdings-holding-value.down {
    color: var(--color-down);
}
@media (max-width: 480px) {
    .holdings-holding-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 12px;
    }
    .holdings-holding-value {
        font-size: var(--em-92);
    }
}

/* 持仓内容区：可滚动 */
.holdings-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 15px 15px;
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条但保留滚动（Firefox / IE + Webkit/Chrome） */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.holdings-modal-body::-webkit-scrollbar {
    display: none;
}

/* 弹框内持仓标题：加粗 + 图标 + 底部分隔线 + 右侧合计 */
.holdings-modal .holdings-title {
    font-size: var(--em-82);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    padding: 0 2px 6px;
    border-bottom: 1px solid var(--color-border-lighter);
}
.holdings-modal .holdings-title i {
    margin-right: 4px;
    color: var(--color-primary);
    font-size: var(--em-105);
    vertical-align: -0.05em;
}
.holdings-modal .holdings-total {
    font-size: var(--em-92);
    font-weight: 500;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* 弹框内持仓表格：圆角 + 表头底色 + 斑马纹，宽度 100% 不再受表格列宽约束 */
.holdings-modal .holdings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--em-86);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.holdings-modal .holdings-table th {
    background: var(--color-surface-sunken);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 8px 12px;
}
.holdings-modal .holdings-table td {
    padding: 8px 12px;
}
.holdings-modal .holdings-table tbody tr:nth-child(even) td {
    background: var(--color-surface-alt);
}

/* 持仓区块间距 */
.holdings-section {
    margin-bottom: 8px;
}

/* 持仓列表：卡片式可展开（<details> 原生展开/收起，零 JS）
   通用样式：首页(QDII)、排行榜、尾盘突击、收藏页共用（holdings-panel.js 公共模块 + qdii.js 内联渲染结构同源） */
.holdings-panel {
    min-width: 0;
}
.hstock-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 表头：与摘要行对齐 */
.hstock-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    font-size: var(--em-75);
    color: var(--color-text-faint);
    border-bottom: 1px solid var(--color-border-lighter);
}
.hstock-header-seq {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.hstock-header-info {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.hstock-header-ratio {
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}
.hstock-header-chg {
    min-width: 54px;
    text-align: center;
    flex-shrink: 0;
}
.hstock-header-board {
    min-width: 34px;
    text-align: center;
    flex-shrink: 0;
}
/* 表头末尾占位：对齐 summary 的 toggle 图标列（toggle 0.8em，header 与 summary 同为 12px，故 0.8em） */
.hstock-header::after {
    content: "";
    width: 0.8em;
    flex-shrink: 0;
}
.hstock-header-pe {
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}
/* 可排序列：点击切换升降序，当前列高亮 + 方向三角 */
.hstock-header-sortable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition:
        color 0.12s,
        opacity 0.12s;
}
.hstock-header-sortable:active {
    opacity: 0.6;
}
.hstock-header-sortable.active {
    color: var(--color-primary, #667eea);
    font-weight: 600;
}
/* 排序图标：仿 Element UI 双三角形（上=升序，下=降序），与排行榜表头一致
   默认两三角形浅灰，激活时对应方向三角染主色 */
.hstock-header-sortable .sort-caret-wrapper {
    margin-top: -3px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3px;
    vertical-align: middle;
    width: 8px;
    height: 9px;
    position: relative;
    flex-shrink: 0;
}
.hstock-header-sortable .sort-caret {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    transition: border-color 0.2s;
}
.hstock-header-sortable .sort-caret.ascending {
    border-bottom: 4px solid var(--color-text-quaternary);
    top: 0;
}
.hstock-header-sortable .sort-caret.descending {
    border-top: 4px solid var(--color-text-quaternary);
    bottom: 0;
}
.hstock-header-sortable .sort-caret.ascending.active {
    border-bottom-color: var(--color-primary);
}
.hstock-header-sortable .sort-caret.descending.active {
    border-top-color: var(--color-primary);
}
/* 每行 summary：序号 | 股票(名/码) | 板块 | 占比 | 市盈率 | 涨跌幅 | 箭头 */
.hstock-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 6px;
    font-size: var(--fs-12);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}
.hstock-summary::-webkit-details-marker {
    display: none;
}
.hstock-summary:active {
    background: var(--color-surface-alt);
}
.hstock-seq {
    width: 14px;
    text-align: center;
    font-size: var(--em-75);
    color: var(--color-text-faint);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.hstock-name {
    font-size: var(--em-75);
    font-weight: 400;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s;
}
.hstock-name:active {
    color: var(--color-primary, #3d4fb0);
}
.hstock-code {
    font-size: var(--em-82);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
/* 名称+代码包裹（holdings-panel.js 公共模块结构）：名称在上、代码在下，撑满剩余空间 */
.hstock-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
}
.hstock-info .hstock-name {
    flex: 0 0 auto;
}
.hstock-info .hstock-code {
    font-size: var(--em-82);
}
/* 板块标签外层：固定不收缩、垂直居中；去除 board-tag 默认左 margin */
.hstock-board {
    flex-shrink: 0;
    min-width: 34px;
    text-align: center;
    align-self: center;
}
.hstock-board .board-tag {
    margin-left: 0;
}
.hstock-ratio {
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 40px;
    text-align: center;
}
.hstock-chg {
    font-size: var(--em-75);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 54px;
    text-align: center;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.hstock-chg.up {
    color: var(--color-up);
}
.hstock-chg.down {
    color: var(--color-down);
}
.hstock-pe {
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 40px;
    text-align: center;
}
.hstock-toggle {
    font-size: var(--em-75);
    color: var(--color-text-faint);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.hstock-row[open] .hstock-toggle {
    transform: rotate(180deg);
}
/* 个股详情跳转按钮（summary 末尾的外链图标） */
.hstock-detail-link {
    font-size: var(--em-75);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    padding: 2px;
    margin-left: 2px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.12s,
        background 0.12s;
}
.hstock-detail-link:active {
    color: var(--color-primary, #3d4fb0);
    background: var(--color-surface-tint);
    transform: scale(0.92);
}
/* 展开详情：2×4 网格，柔和凹陷背景 */
.hstock-detail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px 8px;
    padding: 6px 6px 8px 28px;
    margin: 0 2px 2px;
    background: var(--color-surface-sunken, var(--color-bg));
    border-radius: var(--radius-xs);
    animation: hstockExpand 0.18s ease;
}
@keyframes hstockExpand {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hd-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 0;
}
.hd-label {
    font-size: var(--em-66);
    color: var(--color-text-faint);
    line-height: 1.3;
}
.hd-val {
    font-size: var(--em-78);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.hd-val.up {
    color: var(--color-up);
}
.hd-val.down {
    color: var(--color-down);
}
/* 持仓数量提示 */
.holdings-count {
    margin-left: auto;
    font-size: var(--em-68);
    font-weight: 400;
    color: var(--color-text-faint);
    white-space: nowrap;
}

/* 实时估值分时图区域（holdings-modal / holdings-panel 共享） */
.intraday-section {
    margin-top: 14px;
}
.intraday-date {
    font-size: var(--em-75);
    font-weight: 400;
    color: var(--color-text-quaternary);
}

/* 近一周收盘涨跌柱状图（分时图下方） */
/* 仿 mode-toggle 滑块 tab：灰底容器 + iOS 滑块指示器（JS 移动到 active 位置） */
.weekly-tabs {
    display: inline-flex;
    position: relative;
    background: var(--color-segment-bg);
    border-radius: var(--radius-sm);
    padding: 2px;
    margin-left: 8px;
    overflow: hidden;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.weekly-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    background: var(--glass-slider-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: calc(var(--radius-sm) - 2px);
    box-shadow:
        var(--glass-slider-shadow),
        inset 0 1px 0 var(--glass-slider-highlight),
        inset 0 0 0 0.5px var(--glass-slider-border);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
    pointer-events: none;
}
.weekly-tab {
    position: relative;
    z-index: 1;
    padding: 2px 10px;
    font-size: var(--em-62);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s;
    white-space: nowrap;
}
.weekly-tab.active {
    color: var(--color-text-primary);
    font-weight: 600;
}
.weekly-tip {
    margin-left: auto;
    font-size: var(--em-62);
    color: var(--color-text-quaternary);
}
.weekly-chart {
    padding: 8px 0 4px;
}
.weekly-bars {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    position: relative;
    padding: 4px 0;
}
.weekly-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
/* 0轴基准：涨柱在 up 区从轴向上，跌柱在 down 区从轴向下 */
.weekly-bar-up,
.weekly-bar-down {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.weekly-bar-up {
    align-items: flex-end;
}
.weekly-bar-down {
    align-items: flex-start;
}
.weekly-bar-axis {
    width: 100%;
    height: 1px;
    background: var(--color-border-light, #e0e0e0);
}
.weekly-bar-fill {
    position: relative;
    width: 56%;
    max-width: 22px;
    min-height: 4px;
}
.weekly-bar-fill.up {
    background: var(--color-up, #e74c3c);
    border-radius: 2px 2px 0 0;
}
.weekly-bar-fill.down {
    background: var(--color-down, #2ecc71);
    border-radius: 0 0 2px 2px;
}
/* 涨跌幅显示在柱子末端外侧（涨柱顶上方/跌柱底下方），居中可溢出柱宽 */
.weekly-bar-val {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--em-56, 9px);
    white-space: nowrap;
}
.weekly-bar-fill.up .weekly-bar-val {
    bottom: 100%;
    margin-bottom: 2px;
    color: var(--color-up, #e74c3c);
}
.weekly-bar-fill.down .weekly-bar-val {
    top: 100%;
    margin-top: 2px;
    color: var(--color-down, #2ecc71);
}
.weekly-bar-date {
    font-size: var(--em-62);
    color: var(--color-text-quaternary);
    margin-top: 14px;
}
/* 分时图数据源标签：显示实际数据源（新浪/天天/东财），让 source 切换可见 */
.intraday-source {
    font-size: var(--em-70);
    font-weight: 500;
    color: var(--color-primary, #667eea);
    background: color-mix(in srgb, var(--color-primary, #667eea) 12%, transparent);
    padding: 1px 7px;
    border-radius: 20px;
    line-height: 1.6;
    white-space: nowrap;
    margin-left: auto;
}
.intraday-section .holdings-title {
    gap: 8px;
}
.intraday-chart-wrap {
    position: relative;
    width: 100%;
    height: 130px;
    margin-top: 4px;
}
.intraday-chart-wrap canvas {
    display: block;
}
/* 分时图 tooltip：悬停/touch 时显示节点数据（时间/涨跌幅/估值） */
.chart-tooltip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    padding: 6px 10px;
    border-radius: var(--radius-md, 12px);
    background: var(--glass-bg, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    font-size: var(--em-80);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--color-text-primary);
}
.chart-tooltip .ct-time {
    font-size: var(--em-90);
    color: var(--color-text-tertiary);
}
.chart-tooltip .ct-pct {
    font-weight: 700;
    font-size: var(--em-105);
}
.chart-tooltip .ct-pct.up {
    color: #e74c3c;
}
.chart-tooltip .ct-pct.down {
    color: #2ecc71;
}
.chart-tooltip .ct-val {
    font-size: var(--em-75);
    color: var(--color-text-secondary);
}
.intraday-loading,
.intraday-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    color: var(--color-text-quaternary);
    font-size: var(--em-75);
}

/* 弹框内空态（加载态由全局 .modal-loading 统一处理） */
.holdings-modal .holdings-empty {
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--em-82);
    padding: 24px 0;
}

/* 第一列基金名称单元格内容 */
.fav-name-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.fav-name-info {
    flex: 1;
    min-width: 0;
}
.fav-name {
    font-size: var(--em-100);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fav-code {
    font-size: var(--em-80);
    color: var(--color-text-tertiary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 板块列：独立一列，仅 sector-tag（可点击编辑），连涨跌已移至 streak-cell 列 */
.fav-table .sector-cell {
    text-align: center;
    white-space: nowrap;
    padding: 6px 4px;
}
.fav-table .sector-cell .sector-tags-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: wrap;
}
.fav-table .sector-cell .sector-tag {
    margin: 0;
    font-size: var(--em-82);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.fav-table .sector-cell .sector-tag:active {
    transform: scale(0.92);
}
.fav-table th.sector-col {
    text-align: center;
    min-width: 56px;
}
/* 连涨跌列：独立一列，居中显示 streak-tag（连涨红/连跌绿） */
.fav-table .streak-cell {
    text-align: center;
    white-space: nowrap;
    padding: 6px 4px;
}
.fav-table .streak-cell .streak-tag {
    margin: 0;
    font-size: var(--em-78);
}

/* 涨跌色：红涨绿跌，与排行榜一致 */
.fav-table td.up {
    color: var(--color-up);
    font-weight: 500;
}
.fav-table td.down {
    color: var(--color-down);
    font-weight: 500;
}
/* 最大回撤列始终绿色（负值） */
.fav-table td.drawdown {
    color: var(--color-down);
}

/* 表格容器最小高度撑满屏幕剩余空间：100vh - header(72) - container padding(20) - bottom-nav(55) ≈ 145px
   注意：min-height 必须设在 wrapper 上，不能设在 .fav-table 上 ——
   table 元素设 min-height 会被当成 height 处理，把行均分拉高；设在 wrapper 上则容器撑满、
   表格在顶部对齐、行高保持不变。
   仅作用于收藏页（.page-favorites），排行榜页 header 高度不同保持原状 */
/* .page-favorites .fav-table-wrapper {
    min-height: calc(100vh - 156px);
} */
/* 空状态：独立居中提示（隐藏表格，整个 #content 区域水平+垂直居中显示文字）
   flex:1 撑满 #content，配合 #content 已有的 flex column 布局实现屏幕居中 */
.fav-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
.fav-empty-state.hidden {
    display: none;
}
.fav-empty-inner {
    color: var(--color-text-tertiary);
    font-size: var(--em-95);
    line-height: 2;
}
.fav-empty-inner i {
    display: block;
    font-size: var(--em-260);
    color: var(--color-text-quaternary);
    margin-bottom: 12px;
}
.fav-empty-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--em-92);
    -webkit-tap-highlight-color: transparent;
}
.fav-empty-link:active {
    opacity: 0.6;
}

/* ===== 移动端适配（≤480px）===== */
@media (max-width: 480px) {
    .fav-table th,
    .fav-table td {
        width: 78px;
        min-width: 78px;
        padding: 10px 8px;
        font-size: var(--em-92);
    }
    .fav-table .col-fixed {
        width: 110px;
        min-width: 110px;
    }
    .fav-name {
        font-size: var(--em-92);
    }
}

/* ===== PC 端：列稍宽，便于阅读 ===== */
@media (hover: hover) and (pointer: fine) {
    .fav-table th,
    .fav-table td {
        width: 100px;
        min-width: 100px;
        padding: 10px 10px;
    }
    .fav-table .col-fixed {
        width: 160px;
        min-width: 160px;
    }
    .fav-table tbody tr.fav-row:hover {
        background: var(--color-surface-alt);
    }
}

/* ===== 收藏页：page-favorites 容器布局 ===== */
/* flex 布局链：body(flex column) → header(flex-shrink:0) → container(flex:1 + flex column) → #content(flex:1)
   与 .page-rankings 一致，确保加载数据时 #content 撑满剩余空间 */
/* block 布局：避免 flex column 导致 container 宽度收缩成 fit-content（同 .page-rankings） */
.page-favorites {
    min-height: 100vh;
}
.page-favorites .header {
    flex-shrink: 0;
}

/* ===== 收藏页头部搜索框 + 下拉结果 ===== */
.fav-search-wrap {
    position: relative; /* 下拉框绝对定位的参考 */
}
/* 下拉浮层：距离输入框 10px，与 search-box 同宽，圆角 + 阴影 + 限高滚动 */
.fav-search-dropdown {
    position: absolute;
    top: calc(100% + 10px); /* 距离输入框 10px 间距 */
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--color-border-lighter);
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    -webkit-overflow-scrolling: touch;
}
.fav-search-dropdown.hidden {
    display: none;
}
/* 滚动条样式与 .fav-table-wrapper 保持一致 */
.fav-search-dropdown::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
.fav-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.fav-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-quaternary);
}
.fav-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
/* 加载/错误/空状态文字 */
.fav-search-state {
    padding: 16px 12px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--em-75);
}
.fav-search-state.fav-search-error {
    color: var(--color-down);
}
/* 结果项 */
.fav-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-lighter);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fav-search-item:last-child {
    border-bottom: none;
}
.fav-search-item:hover,
.fav-search-item.active {
    background: var(--color-surface-alt);
}
/* 刚添加成功的瞬时高亮反馈（绿色闪烁） */
.fav-search-item.just-added {
    animation: favSearchFlash 0.6s ease;
}
@keyframes favSearchFlash {
    0% {
        background: rgba(52, 199, 89, 0.3);
    }
    100% {
        background: transparent;
    }
}
.fav-search-info {
    flex: 1;
    min-width: 0;
}
.fav-search-name {
    font-size: var(--em-90);
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 持仓匹配标签：单独一行放在基金名下方，避免长名称挤掉标签 */
.fav-search-holding {
    margin-top: 3px;
    display: flex;
    align-items: center;
}
/* 估值：独立元素放在按钮左侧，固定宽度右对齐 */
.fav-search-est {
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
    font-size: var(--em-75);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
}
.fav-search-est.up {
    color: var(--color-up);
    font-weight: 600;
}
.fav-search-est.down {
    color: var(--color-down);
    font-weight: 600;
}

/* ============================================================
   尾盘抢筹页面（tail-rush.html）独有样式
   检测 14:30 后突然拉升 ≥ 阈值的 A 股基金
   ============================================================ */

/* 页面布局：与 .page-rankings 一致（block 布局，避免 flex 收缩宽度） */
.page-tail-rush {
    min-height: 100vh;
}
.page-tail-rush .header {
    flex-shrink: 0;
}

/* 状态条：快照时间 → 最新时间（header 内，玻璃态） */
.rush-status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    font-size: var(--em-82);
    color: var(--glass-text);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.rush-status-bar i {
    font-size: var(--em-105);
    opacity: 0.85;
}
.rush-status-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

/* 扫描中指示（header 右上角）：字号/字重对齐 .source-toggle，保持大圆角 */
.rush-status-scanning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-11);
    font-weight: 600;
    color: var(--glass-text);
    background: var(--glass-bg);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.rush-status-scanning i {
    font-size: var(--em-110);
    animation: spin 1s linear infinite;
}

/* 阈值筛选行：标签 + mode-toggle 容器（两行：拉升 + 砸盘） */
.rush-mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.rush-mode-row + .rush-mode-row {
    margin-top: 6px;
}
/* 行首标签：图标 + "拉升" / "砸盘" */
.rush-mode-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--em-78);
    font-weight: 600;
    color: var(--glass-text-secondary);
    white-space: nowrap;
}
.rush-mode-label i {
    font-size: var(--em-100);
}
/* mode-toggle 紧凑变体：4 个阈值按钮（拉升0.5/0.75 + 砸盘0.5/0.75），等分宽度 */
.rush-threshold-toggle {
    flex: 0 0 auto;
    min-width: 0;
    border-radius: var(--radius-lg);
}
.rush-threshold-toggle .mode-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 10px;
    font-size: var(--em-75);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    /* 图标 + 数字垂直居中对齐 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
/* 拉升组与砸盘组之间的分隔线 */
.rush-threshold-sep {
    flex: 0 0 1px;
    width: 1px;
    align-self: center;
    height: 60%;
    background: var(--glass-border);
    margin: 0 2px;
}

/* 升幅/跌幅主数值：红色（涨）/ 绿色（跌） + 图标 */
.rush-diff {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--em-110);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.rush-diff i {
    font-size: var(--em-95);
}
.rush-diff.up {
    color: var(--color-up);
}
.rush-diff.down {
    color: var(--color-down);
}
/* 砸盘：火焰图标倒置（向下喷发） */
.rush-diff.down i {
    transform: rotate(180deg);
}

/* 估值轨迹副行：右对齐，字号与 .estimation-time 一致（0.62em） */
.rush-trail {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    font-size: var(--em-62);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.rush-trail i {
    font-size: var(--em-90);
    opacity: 0.6;
}
.rush-trail .snap,
.rush-trail .curr {
    font-weight: 500;
}
.rush-trail .up {
    color: var(--color-up);
}
.rush-trail .down {
    color: var(--color-down);
}
/* intraday 模式：尾盘时间区间标签（"尾盘 14:30→15:00"） */
.rush-trail .trail-label {
    font-size: var(--em-92);
    color: var(--color-text-tertiary);
    opacity: 0.85;
    margin-right: 1px;
}

/* 空状态：独立元素（不放进 ranking-list，避免白底卡片包裹）
   继承默认 .empty-state（min-height 撑满视口 + flex 居中） */
.page-tail-rush .empty-state.hidden {
    display: none;
}
.page-tail-rush .empty-state p {
    font-size: var(--em-95);
    line-height: 1.6;
    margin: 0;
}
.page-tail-rush .empty-state p small {
    display: block;
    margin-top: 6px;
    font-size: var(--em-75);
    color: var(--color-text-quaternary);
}
/* 空状态切换按钮：提示对侧模式（rally↔drop）有匹配基金，一键切换查看 */
.empty-switch-btn {
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: var(--radius-lg, 20px);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    background: var(--glass-bg, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--color-text);
    font-size: var(--em-90);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.empty-switch-btn i {
    font-size: var(--em-130);
    color: var(--color-primary);
}
.empty-switch-btn .switch-text strong {
    color: var(--color-primary);
    font-weight: 700;
}
.empty-switch-btn .switch-arrow {
    margin-left: 4px;
    font-size: var(--em-75);
    color: var(--color-text-tertiary);
}
.empty-switch-btn:active {
    transform: scale(0.96);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.18);
}
/* 收藏按钮：圆形主色，已收藏项灰色禁用 */
.fav-search-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--em-110);
    transition: transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fav-search-btn:active {
    transform: scale(0.92);
}
.fav-search-btn.added {
    background: var(--color-surface-sunken);
    color: var(--color-text-quaternary);
    cursor: default;
}
@media (hover: hover) and (pointer: fine) {
    .fav-search-btn:not(.added):hover {
        transform: scale(1.08);
    }
}
.page-favorites .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.page-favorites #content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* .hidden 优先级补丁：#content 初始带 .hidden 时必须隐藏。
   因 .page-favorites #content 的 display:flex 特异性(1,1,0)高于 .hidden(0,1,0) 会覆盖 */
.page-favorites #content.hidden {
    display: none;
}
.page-favorites .fav-summary {
    font-size: var(--em-78);
    color: var(--glass-text-secondary);
    margin-top: 4px;
    padding: 0 4px;
}

/* ============================================================
   基金对比功能：对比按钮 + 底部弹出浮层 + 对比表 + 雷达图
   ============================================================ */

/* header 对比按钮：复用 .source-toggle.io-btn 风格，加计数徽章 */
.compare-btn {
    position: relative;
}
.compare-btn .compare-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--fs-10);
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.compare-btn.active .compare-count {
    transform: scale(1);
}

/* header 批量取消收藏按钮：复用 compare-btn 徽章风格，active 用红色徽章（危险操作） */
.batch-remove-btn {
    position: relative;
}
.batch-remove-btn .batch-remove-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-up);
    color: #fff;
    font-size: var(--fs-10);
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.batch-remove-btn.active .batch-remove-count {
    transform: scale(1);
}

/* 对比浮层：底部弹出，复用 holdings-modal 的 mask + 弹簧动画范式 */
.compare-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
}
.compare-modal.hidden {
    display: none;
}
.compare-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: holdings-modal-mask-in 0.2s ease;
}
.compare-modal-card {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 78vh;
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: compare-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
@keyframes compare-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
.compare-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--color-border-lighter);
    flex-shrink: 0;
}
.compare-modal-title {
    font-size: var(--em-105);
    font-weight: 600;
    color: var(--color-text-primary);
}
.compare-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--color-surface-alt);
    border-radius: 50%;
    color: var(--color-text-secondary);
    font-size: var(--fs-16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.compare-modal-close:active {
    transform: scale(0.9);
    background: var(--color-border);
}
.compare-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox 滚动条美化 */
    scrollbar-color: var(--color-border) transparent;
}

/* 对比表：第一列固定（指标名），横向滚动 */
.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* 对比浮层滚动条美化：复用表格滚动条范式（细而半透明） */
.compare-modal-body::-webkit-scrollbar,
.compare-table-wrap::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
.compare-modal-body::-webkit-scrollbar-thumb,
.compare-table-wrap::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.compare-modal-body::-webkit-scrollbar-thumb:hover,
.compare-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-quaternary);
}
.compare-modal-body::-webkit-scrollbar-track,
.compare-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.compare-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--em-82);
    width: 100%;
}
.compare-table th,
.compare-table td {
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border-lighter);
}
.compare-table th {
    background: var(--color-surface-sunken);
    font-weight: 600;
    color: var(--color-text-secondary);
    position: sticky;
    top: 0;
    z-index: 2;
}
/* 第一列固定：指标名 */
.compare-table th:first-child,
.compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    min-width: 88px;
    box-shadow: inset -1px 0 0 var(--color-border);
}
.compare-table th:first-child {
    z-index: 3;
    background: var(--color-surface-sunken);
}
/* 基金名列稍宽 */
.compare-table .compare-fund-name {
    min-width: 110px;
    font-weight: 600;
    color: var(--color-text-primary);
}
/* 最优值高亮：金色背景（金=最优，奖牌直觉，避开红涨绿跌语义） */
.compare-table td.best {
    background: rgba(255, 184, 0, 0.14);
    font-weight: 600;
}
/* 最差值高亮：灰色背景（灰=靠后，不与涨跌色冲突） */
.compare-table td.worst {
    background: var(--color-surface-sunken);
    font-weight: 600;
}
/* 涨跌色：红涨绿跌（中国习惯），保持不变 */
.compare-table td.up {
    color: #e74c3c;
}
.compare-table td.down {
    color: #2ecc71;
}
/* 回撤：绿字（亏损=跌），修复原误用红色的问题，与 fav-table 一致 */
.compare-table td.drawdown {
    color: var(--color-down);
}

/* 获胜者表头：金色下划线 + 奖杯徽章 */
.compare-table th.compare-fund-name.winner {
    background: rgba(255, 184, 0, 0.1);
    border-bottom: 2px solid var(--color-gold);
}
.winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-gold-gradient);
    color: #fff;
    font-size: var(--em-68);
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: 600;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(255, 184, 0, 0.4);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.winner-badge i {
    font-size: var(--em-105);
}

/* 综合评分行：表底汇总，获胜者金色高亮 */
.compare-table tr.score-row td {
    background: var(--color-surface-alt);
    font-weight: 700;
    color: var(--color-text-primary);
    border-top: 2px solid var(--color-border);
}
.compare-table tr.score-row td:first-child {
    color: var(--color-text-secondary);
    font-weight: 600;
}
.compare-table td.score-cell.winner {
    background: rgba(255, 184, 0, 0.18) !important;
    color: #b8860b !important;
    font-weight: 700;
}
.compare-table td.score-cell.zero {
    color: var(--color-text-tertiary);
    font-weight: 500;
}

/* 对比表图例：说明背景色与字色含义，避免用户混淆 */
.compare-legend-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0 2px 8px;
    font-size: var(--em-75);
    color: var(--color-text-secondary);
}
.compare-legend-bar .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.compare-legend-bar .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.compare-legend-bar .legend-dot.best {
    background: rgba(255, 184, 0, 0.5);
}
.compare-legend-bar .legend-dot.worst {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
}
.compare-legend-bar .legend-dot.up {
    background: #e74c3c;
}
.compare-legend-bar .legend-dot.down {
    background: #2ecc71;
}

/* 雷达图容器 */
.compare-radar-section {
    margin-top: 8px;
}
.compare-radar-title {
    font-size: var(--em-82);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    padding: 0 4px;
}
.compare-radar-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compare-radar-wrap canvas {
    display: block;
}
/* 雷达图图例 */
.compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    padding: 0 8px;
}
.compare-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--em-75);
    color: var(--color-text-secondary);
}
.compare-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Toast 提示 */
.compare-toast {
    position: fixed;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--em-75);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s,
        transform 0.2s;
    white-space: nowrap;
}
.compare-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   收藏页汇总栏：移入 header，照 indices-bar 毛玻璃风格（横排5格）
   总持仓 / 当日收益 / 当日涨幅 / 昨日收益 / 昨日涨幅
   ============================================================ */
.fav-summary-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--glass-bg-faint);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-md);
    padding: 11px 8px;
    margin-top: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fav-summary-bar.hidden {
    display: none;
}
.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}
/* 格子间分隔线：半透明白色竖线（除最后一格） */
.summary-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.summary-label {
    font-size: var(--em-70);
    color: var(--glass-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}
.summary-value {
    font-size: var(--em-100);
    font-weight: 700;
    color: var(--color-text-on-primary);
    font-variant-numeric: tabular-nums;
    transition: color 0.2s;
    white-space: nowrap;
}
.summary-value.up {
    color: var(--color-up);
}
.summary-value.down {
    color: var(--color-down);
}
/* 窄屏手机端：5格横排较挤，缩小字号保证可读 */
@media (max-width: 480px) {
    .fav-summary-bar {
        padding: 9px 4px;
    }
    .summary-item {
        gap: 3px;
    }
    .summary-label {
        font-size: var(--em-62);
    }
    .summary-value {
        font-size: var(--em-86);
    }
}

/* ============================================================
   持仓金额单元格：点击弹框输入
   ============================================================ */
.holding-cell {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.holding-empty {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px dashed var(--color-border);
    color: var(--color-text-tertiary);
    font-size: var(--em-82);
    transition:
        border-color 0.15s,
        color 0.15s;
}

/* ============================================================
   邮箱页面样式
   ============================================================ */

.mailbox-subheader {
    font-size: var(--em-75);
    color: var(--glass-text-secondary);
    margin-top: 6px;
    opacity: 0.85;
}

/* 旧 .mail-item / .mail-item-body / .mail-item-row1 / .mail-subject / .mail-date / .mail-from 样式已废弃
   邮件列表项统一使用 .news-card* 公共组件样式 */

/* 旧 .mail-item-summary 样式已废弃，统一使用 .news-card-summary */

/* ============ 公共新闻卡片（news-card.js）统一样式 ============ */
/* mailbox / stock-news / truth 共用
   结构：body（标题+摘要+扩展内容）→ 横线 → footer（时间+tag+播放按钮，右对齐） */
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    transition: background 0.12s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.news-card:last-child {
    margin-bottom: 0;
}
.news-card:active {
    background: var(--color-surface-sunken);
}
.news-card-body {
    flex: 1;
    min-width: 0;
}
/* 标题：独立块，最多 2 行 */
.news-card-title {
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 摘要 / AI 总结 */
.news-card-summary {
    margin-top: 4px;
    font-size: var(--em-80);
    line-height: 1.4;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-summary.loading {
    color: var(--color-text-tertiary);
    font-style: italic;
}
.news-card-summary.err {
    color: var(--color-text-tertiary);
}
/* Truth 正文不省略，完整显示 */
.news-card-summary.no-clamp {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}
.news-card-summary i {
    margin-right: 2px;
    font-size: var(--em-70);
    vertical-align: middle;
    color: var(--color-primary, #4078c0);
}
.news-card-summary .ai-label {
    color: var(--color-primary, #4078c0);
    font-weight: 500;
    margin-right: 4px;
}
/* 扩展区：Truth 译文/媒体等页面自定义内容，渲染在摘要下方、footer 上方 */
.news-card-extra {
    margin-top: 8px;
}
/* Truth 译文块（news-card 内） */
.news-card-extra .truth-item-translation {
    margin-top: 0;
    padding: 10px 12px;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    font-size: var(--em-90);
    color: var(--color-text-secondary);
    line-height: 1.5;
    word-break: break-word;
}
.news-card-extra .truth-item-content {
    font-size: var(--fs-14);
    color: var(--color-text-primary);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.news-card-extra .truth-item-media {
    width: 100%;
    max-width: 320px;
    max-height: 400px;
    border-radius: var(--radius-md, 12px);
    margin-top: 8px;
    display: block;
    cursor: pointer;
}
.news-card-extra .truth-trans-label {
    display: inline-block;
    font-size: inherit;
    color: var(--color-primary);
    margin-right: 6px;
    font-weight: 600;
}
/* 底部 footer：上方横线分隔，时间/tag/播放按钮 右对齐 */
.news-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: var(--em-80);
    color: var(--color-text-tertiary);
}
.news-card-footer .news-card-time {
    font-size: var(--em-70);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.news-card-footer .tts-mini {
    flex-shrink: 0;
}
/* footer 内的链接（如 Truth "原文"） */
.news-card-footer a {
    font-size: var(--em-80);
    color: var(--color-primary);
    text-decoration: none;
    flex-shrink: 0;
}
/* 财经新闻频道标签（footer 内） */
.news-card-footer .sn-channel-tag {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border-radius: var(--radius-xs, 4px);
    font-size: var(--em-70);
    flex-shrink: 0;
}

/* 邮件详情 — 返回栏融入 header 渐变背景 */
.mail-header-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 通用返回按钮行（header 底部单独一行） */
.header-back-row {
    padding: 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-stock-hot .header-back-row {
    justify-content: flex-start;
    gap: 8px;
}

/* 通用返回按钮（header 内，复用 mail-back-btn 样式） */
.header-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: var(--em-80);
    font-weight: 500;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 16px;
    transition: all 0.15s;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.header-back-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.96);
}
.header-back-btn i {
    font-size: var(--em-90);
}

/* ===== 全局导航返回按钮（微信/QQ 风格：左上角小圆箭头，与标题同行）=====
   玻璃风格与 io-btn/source-toggle 一致，26×26 与 mode-toggle 滑块高度对齐 */
.nav-back-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--glass-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    margin-right: 8px;
}
.nav-back-btn:active {
    transform: scale(0.9);
}
.nav-back-btn i {
    font-size: 14px;
    line-height: 1;
}
/* 带 nav-back-btn 的 header-top：返回按钮 + 标题左侧对齐 */
.header-top:has(.nav-back-btn) {
    gap: 0;
}
/* 返回按钮紧跟标题，不被 space-between 推开 */
.header-top:has(.nav-back-btn) h1 {
    margin-right: auto;
}

.mail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: var(--em-80);
    font-weight: 500;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 16px;
    transition: all 0.15s;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mail-back-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.96);
}

.mail-back-btn i {
    font-size: var(--em-90);
}

/* 元信息：主题截断 + 发件人小字（白色文字融入 header） */
.mail-meta-mini {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mail-meta-subject {
    font-size: var(--em-86);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.mail-meta-sub {
    font-size: var(--em-70);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.mail-detail-body {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mail-iframe {
    width: 100%;
    min-height: 80vh;
    border: none;
    display: block;
}

/* === 天天基金排行（原生渲染，数据源 rankhandler.aspx）=== */
body.page-tiantian-rank {
    padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}
/* 类型 tab + 排序按钮：footerSlot 第一行 */
.tt-rank-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.tt-rank-toolbar:first-of-type {
    margin-top: 6px;
}
/* 类型 tab：横向滚动，隐藏滚动条 */
.tt-rank-types {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tt-rank-types::-webkit-scrollbar {
    display: none;
}
.tt-rank-types .mode-btn {
    padding: 5px 12px;
    flex-shrink: 0;
}
.tt-rank-periods {
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tt-rank-periods::-webkit-scrollbar {
    display: none;
}
.tt-rank-periods .mode-btn {
    padding: 5px 10px;
    flex-shrink: 0;
}
/* 基金列表：改为独立卡片样式，每条 ranking-item 自带圆角/阴影，间距 15px */
body.page-tiantian-rank .ranking-list {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
body.page-tiantian-rank .ranking-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-bottom: none;
    padding: 12px;
}
body.page-tiantian-rank .ranking-item:active {
    background: var(--color-surface-alt);
}

/* === Truth 页面（特朗普言论） === */
/* 页面 header 头像（truth/mail/more 共用） */
.truth-avatar,
.page-avatar {
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.truth-subheader {
    font-size: var(--em-75);
    color: var(--glass-text-secondary);
    margin-top: 6px;
    opacity: 0.85;
}

.truth-btn-group {
    display: flex;
    gap: 8px;
}

.truth-translate-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 6px 14px;
    font-size: var(--em-75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.truth-translate-btn:active {
    background: rgba(255, 255, 255, 0.28);
}

.truth-translate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.truth-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.truth-item:last-child {
    margin-bottom: 0;
}
.truth-item-main {
    flex: 1 1 auto;
    min-width: 0;
}
.truth-tts-btn {
    flex-shrink: 0;
    margin-top: 2px;
}

.truth-item-content {
    font-size: var(--fs-14);
    color: var(--color-text-primary);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.truth-item-translation {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    font-size: var(--em-90);
    color: var(--color-text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.truth-trans-label {
    display: inline-block;
    font-size: inherit;
    color: var(--color-primary);
    margin-right: 6px;
    font-weight: 600;
}

.hide-original .truth-item-translation {
    background: transparent;
    padding: 0;
    margin-top: 0;
}

.hide-original .truth-trans-label {
    display: none;
}

.truth-item-media {
    width: 100%;
    max-width: 320px;
    max-height: 400px;
    border-radius: var(--radius-md, 12px);
    margin-top: 8px;
    display: block;
    cursor: pointer;
}

/* 旧 .truth-item-meta / .truth-time / .truth-link 样式已废弃
   时间/原文链接/播放按钮统一使用 .news-card-footer 内的样式 */

.holding-amount {
    color: var(--color-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.holding-cell:active .holding-empty {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
    .holding-cell:hover .holding-empty {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
}

/* ============================================================
   持仓金额编辑弹框（仿 source-selector 风格）
   ============================================================ */
.holding-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}
.holding-editor-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}
.holding-editor-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: var(--color-surface);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.holding-editor-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 8px;
    gap: 2px;
}
.holding-editor-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--color-text-primary);
}
.holding-editor-code {
    font-size: var(--fs-12);
    color: var(--color-text-tertiary);
}
.holding-editor-body {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.holding-editor-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.holding-editor-label {
    font-size: var(--em-80);
    color: var(--color-text-secondary);
    padding-left: 2px;
}
.holding-editor-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-16);
    color: var(--color-text-primary);
    background: var(--color-bg);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
    font-variant-numeric: tabular-nums;
}
.holding-editor-input:focus {
    border-color: var(--color-primary);
}
.holding-editor-actions {
    display: flex;
    border-top: 1px solid var(--color-border-light);
}
.holding-editor-btn {
    flex: 1;
    padding: 13px 0;
    font-size: var(--fs-16);
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease;
}
.holding-editor-btn:active {
    background: var(--color-bg);
}
.holding-editor-btn.clear {
    color: var(--color-text-tertiary);
    border-right: 1px solid var(--color-border-light);
    font-size: var(--fs-14);
}
.holding-editor-btn.cancel {
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-border-light);
}
.holding-editor-btn.confirm {
    color: var(--color-primary);
    font-weight: 600;
}

/* ocr-import-modal：截图导入模态框（参考 holding-editor-modal 范式，z-index 高一级避免叠加遮挡） */
.ocr-import-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}
.ocr-import-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}
.ocr-import-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    background: var(--color-surface);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}
.ocr-import-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.ocr-import-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--color-text-primary);
}
.ocr-import-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: var(--fs-18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
}
.ocr-import-close:active {
    background: var(--color-bg);
}
.ocr-import-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    flex: 1;
}
/* 全选栏：列表顶部固定一条，左对齐复选框 + 标签，与列表项对齐 */
.ocr-select-all-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 2;
}
.ocr-select-all-bar input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.ocr-select-all-bar label {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ocr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ocr-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
}
.ocr-item:last-child {
    border-bottom: none;
}
.ocr-item-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.ocr-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ocr-item-name {
    font-size: var(--fs-13);
    color: var(--color-text-primary);
    line-height: 1.35;
    word-break: break-all;
}
.ocr-item-matched {
    font-size: var(--em-80);
    color: var(--color-text-secondary);
    line-height: 1.3;
}
.ocr-item-matched .ocr-matched-code {
    color: var(--color-text-tertiary);
    margin-left: 4px;
}
.ocr-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.ocr-item-status {
    font-size: var(--em-75);
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.5;
    white-space: nowrap;
}
.ocr-item-status.matched {
    background: var(--tag-green-bg);
    color: var(--tag-green-text);
}
.ocr-item-status.unmatched {
    background: var(--tag-red-bg);
    color: var(--tag-red-text);
}
.ocr-item-status.ambiguous {
    background: var(--tag-orange-bg);
    color: var(--tag-orange-text);
}
.ocr-item-status.favorited {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}
.ocr-item-amount {
    flex-shrink: 0;
    width: 90px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-13);
    color: var(--color-text-primary);
    background: var(--color-bg);
    outline: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.ocr-item-amount:focus {
    border-color: var(--color-primary);
}
.ocr-candidates {
    padding: 6px 14px 8px 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ocr-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
.ocr-search-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-13);
    color: var(--color-text-primary);
    background: var(--color-bg);
    outline: none;
}
.ocr-search-input:focus {
    border-color: var(--color-primary);
}
.ocr-search-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--em-80);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ocr-search-btn:active {
    background: var(--color-primary-dark);
}
.ocr-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: var(--em-80);
    color: var(--color-text-secondary);
}
.ocr-candidate:active {
    background: var(--color-border-light);
}
.ocr-candidate-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ocr-candidate-code {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}
.ocr-candidate-pick {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: var(--fs-14);
    cursor: pointer;
}
.ocr-import-summary {
    padding: 8px 14px;
    font-size: var(--em-80);
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.ocr-import-actions {
    display: flex;
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.ocr-import-actions .holding-editor-btn {
    flex: 1;
}
.ocr-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--fs-14);
}
@media (max-width: 360px) {
    .ocr-item-amount {
        width: 72px;
    }
    .ocr-import-card {
        max-width: 100%;
    }
}

.fund-tags-row {
    .fund-code {
        display: none !important;
    }
}

/* ===== 地区合规提示（region-notice） ===== */
/* 收盘 Tab 下的合规提示条：海外用户提示/周末提示/错误提示 */
.region-notice {
    margin: 0 15px 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: var(--em-82, 0.82em);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.region-notice.hidden {
    display: none;
}

.region-notice.level-info {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}

.region-notice.level-warn {
    background: var(--tag-orange-bg);
    color: var(--tag-orange-text);
}

.region-notice.level-error {
    background: var(--tag-red-bg);
    color: var(--tag-red-text);
}

.region-notice::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ===== 备注/免手续费标签（note-tag / fee-tag） ===== */
/* note-tag：基金备注，点击编辑（rankings/favorites 共用） */
.note-tag {
    display: inline-block;
    font-size: var(--em-62);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    margin-left: 3px;
    vertical-align: middle;
    background: var(--tag-orange-bg);
    color: var(--tag-orange-text);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* fee-tag：免赎回费（rankings 显示"N天免赎回费"提示，favorites 显示倒计时） */
.fee-tag {
    display: inline-block;
    font-size: var(--em-62);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
}
.fee-tag.ok {
    background: var(--tag-green-bg);
    color: var(--tag-green-text);
}
.fee-tag.waiting {
    background: var(--tag-gold-bg);
    color: var(--tag-gold-text);
}
.fee-tag.info {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}

/* 收藏页基金名下方标签容器（note-tag + fee-tag 横向排列） */
.fav-name-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
}

/* 备注编辑器 textarea：复用 holding-editor-input 样式，覆盖为多行 */
.note-editor-textarea {
    resize: none;
    line-height: 1.5;
    font-family: inherit;
}

/* ============================================================
   更多页面（#more）
   ============================================================ */
.more-title {
    font-size: var(--em-140);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
    padding-left: 4px;
}
.more-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.more-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.more-menu-item:active {
    background: var(--color-surface-sunken);
}
/* button 元素重置为与 a 一致的菜单项样式 */
button.more-menu-item {
    font: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.more-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-tint);
    color: var(--color-primary);
    font-size: 18px;
    flex-shrink: 0;
}
.more-menu-text {
    flex: 1;
    min-width: 0;
}
.more-menu-name {
    font-size: var(--em-95);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 1px;
    font-variant-east-asian: full-width;
}
.more-menu-desc {
    font-size: var(--em-75);
    color: var(--color-text-tertiary);
    font-variant-east-asian: full-width;
}
.more-menu-arrow {
    font-size: 16px;
    color: var(--color-text-quaternary);
    flex-shrink: 0;
}

/* 版本号菜单项（更多页面底部，点击刷新页面） */
.more-menu-version {
    cursor: pointer;
}
.more-menu-version .more-menu-arrow {
    display: none;
}
.more-menu-version .more-menu-desc {
    font-variant-east-asian: full-width;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   URL 智能总结独立页面（url-summary.js 渲染）
   - header 内嵌 .search-box 输入框（复用项目通用样式）
   - 页面内：历史记录列表 + 总结结果卡片
   ============================================================ */
.url-summary-page {
    padding-top: 10px;
}
/* header 内的 URL 输入框：复用 .search-box，调整为 url 输入样式 */
.url-summary-search input[type="url"] {
    font-size: var(--fs-caption);
}
/* 历史记录列表 */
.url-summary-history {
    margin-bottom: 12px;
    padding: 12px 14px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.url-summary-history-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-subtitle, 13px);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    margin-bottom: 6px;
}
.url-summary-history-title i {
    font-size: var(--fs-subtitle, 13px);
}
.url-summary-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 6px;
    border: none;
    background: transparent;
    color: var(--color-text-primary, #1a1a1a);
    font: inherit;
    font-size: var(--fs-body, 14px);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}
.url-summary-history-item:active {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.url-summary-history-item > i:first-child {
    color: var(--color-text-tertiary, #999);
    font-size: 14px;
    flex-shrink: 0;
}
.url-summary-history-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.url-summary-history-item > i:last-child {
    color: var(--color-text-quaternary, #ccc);
    font-size: 14px;
    flex-shrink: 0;
}
/* 总结结果卡片（复用 .ai-summary-card 玻璃风格，下方为补充样式） */
.url-summary-result .ai-summary-head {
    align-items: flex-start;
}
.url-summary-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.url-summary-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--fs-caption, 12px);
    color: var(--color-text-secondary, #666);
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.url-summary-tag i {
    font-size: 12px;
}
.url-summary-tag.is-cached {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
}
.url-summary-result-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.06));
}
.url-summary-result-origin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-body, 14px);
    color: var(--color-primary, #3a4ba8);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.url-summary-result-origin:active {
    opacity: 0.7;
}

/* ============================================================
   抖音去水印独立页面（douyin.js 渲染）
   - 页面内：textarea 输入区 + 提示条 + 历史记录列表 + 解析结果卡片
   ============================================================ */
.douyin-page {
    padding-top: 15px;
}
/* 输入区：textarea + 工具栏 */
.douyin-input-wrap {
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.douyin-textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    max-height: 240px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #1a1a1a);
    font: inherit;
    font-size: var(--fs-body, 14px);
    line-height: 1.5;
    resize: vertical;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s;
}
.douyin-textarea:focus {
    border-color: var(--color-primary, #3a4ba8);
}
.douyin-textarea::placeholder {
    color: var(--color-text-tertiary, #999);
    line-height: 1.5;
}
.douyin-input-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 8px;
}
.douyin-input-hint {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-caption, 12px);
    color: var(--color-text-tertiary, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.douyin-input-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.douyin-input-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-size: var(--fs-body, 14px);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity 0.2s,
        background 0.2s;
}
.douyin-input-btn i {
    font-size: 14px;
}
.douyin-input-clear {
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--color-text-tertiary, #999);
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.douyin-input-clear:active {
    opacity: 0.7;
}
.douyin-input-parse {
    color: #fff;
    background: var(--color-primary-gradient, linear-gradient(135deg, #667eea, #764ba2));
}
.douyin-input-parse:active {
    opacity: 0.85;
}
.douyin-input-parse.is-loading {
    opacity: 0.7;
    pointer-events: none;
}
.douyin-input-parse.is-loading i {
    animation: douyin-spin 0.8s linear infinite;
}
@keyframes douyin-spin {
    to {
        transform: rotate(360deg);
    }
}
/* 顶部提示条 */
.douyin-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    font-size: var(--fs-caption, 12px);
    color: var(--color-text-secondary, #666);
    line-height: 1.5;
}
.douyin-tip i {
    font-size: 14px;
    color: var(--color-primary, #3a4ba8);
    flex-shrink: 0;
}
/* 历史记录列表（复用 url-summary 结构） */
.douyin-history {
    margin-bottom: 15px;
    padding: 12px 14px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.douyin-history-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-subtitle, 13px);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    margin-bottom: 6px;
}
.douyin-history-title i {
    font-size: var(--fs-subtitle, 13px);
}
.douyin-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 6px;
    border: none;
    background: transparent;
    color: var(--color-text-primary, #1a1a1a);
    font: inherit;
    font-size: var(--fs-body, 14px);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}
.douyin-history-item:active {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.douyin-history-item > i:first-child {
    color: var(--color-text-tertiary, #999);
    font-size: 14px;
    flex-shrink: 0;
}
.douyin-history-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.douyin-history-item > i:last-child {
    color: var(--color-text-quaternary, #ccc);
    font-size: 14px;
    flex-shrink: 0;
}
/* 解析结果卡片 */
.douyin-result .ai-summary-head {
    align-items: flex-start;
}
.douyin-result-body {
    padding-top: 4px;
}
/* 元信息标签 */
.douyin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.douyin-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--fs-caption, 12px);
    color: var(--color-text-secondary, #666);
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.douyin-tag i {
    font-size: 12px;
}
/* 平台标签：第一位稍微突出，便于一眼区分抖音 / 小红书 */
.douyin-tag-platform {
    color: var(--color-primary, #1677ff);
    background: var(--color-primary-tint, rgba(22, 119, 255, 0.08));
}
/* 标题 */
.douyin-title {
    font-size: var(--fs-body, 15px);
    font-weight: 600;
    color: var(--color-text-primary, #1a1a1a);
    line-height: 1.5;
    margin-bottom: 12px;
    word-break: break-word;
}
/* 视频播放区 */
.douyin-cover {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.douyin-cover video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
/* 图集网格 */
.douyin-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.douyin-image-item {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
    -webkit-tap-highlight-color: transparent;
}
.douyin-image-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.douyin-image-idx {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    backdrop-filter: blur(8px);
}
/* 操作按钮 */
.douyin-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.douyin-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--fs-body, 14px);
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--color-primary-gradient, linear-gradient(135deg, #667eea, #764ba2));
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}
.douyin-btn:active {
    opacity: 0.85;
}
.douyin-btn i {
    font-size: 16px;
}
.douyin-btn-ghost {
    color: var(--color-primary, #3a4ba8);
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.06));
}
@media (max-width: 380px) {
    .douyin-images {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   同花顺热榜页面（stock-hot.js 渲染）
   5 个 tab：热度 · 涨幅 · 新股 · 概念 · 行业
   设计要点：iOS 风格列表 + 顶部 1/2/3 名特殊配色 + AI 解读可折叠
   ============================================================ */
.page-stock-hot .header-top {
    justify-content: space-between;
}
.stockhot-container {
    padding-top: var(--spacing-md);
}
.stockhot-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.stockhot-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    -webkit-tap-highlight-color: transparent;
}
.stockhot-item[data-code] {
    cursor: pointer;
    transition: background 0.12s;
}
.stockhot-item[data-code]:active {
    background: var(--color-surface-sunken);
    transform: scale(0.995);
}
.stockhot-item:active {
    background: var(--color-surface-sunken);
}
.stockhot-rank {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-tint);
    color: var(--color-text-secondary);
    font-size: var(--em-75);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
/* 前三名特殊配色 */
.stockhot-item.rank-top .stockhot-rank {
    color: #fff;
}
.stockhot-item.rank-1 .stockhot-rank {
    background: #ff4d4f;
}
.stockhot-item.rank-2 .stockhot-rank {
    background: #ff7a45;
}
.stockhot-item.rank-3 .stockhot-rank {
    background: #ffa940;
}
.stockhot-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stockhot-row1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.stockhot-name {
    font-size: var(--em-100);
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-east-asian: full-width;
}
.stockhot-code {
    font-size: var(--em-65);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    font-variant-east-asian: full-width;
}
.stockhot-pct {
    margin-left: auto;
    font-size: var(--em-100);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stockhot-pct.up {
    color: var(--color-up);
}
.stockhot-pct.down {
    color: var(--color-down);
}
.stockhot-pct.flat {
    color: var(--color-text-tertiary);
}
.stockhot-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.stockhot-row3 {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-east-asian: full-width;
}
.stockhot-row3 em {
    font-style: normal;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.stockhot-heat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.stockhot-heat i {
    color: #ff7a45;
    font-size: var(--em-86);
}
.stockhot-pop {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-tint);
    color: var(--color-primary-dark);
    font-size: var(--em-65);
    font-variant-east-asian: full-width;
}
.stockhot-pop.red {
    background: rgba(255, 77, 79, 0.1);
    color: var(--color-up);
}
.stockhot-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--em-65);
    font-variant-east-asian: full-width;
}
.stockhot-etf {
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-east-asian: full-width;
}
.stockhot-etf em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}
.stockhot-etf em.up {
    color: var(--color-up);
}
.stockhot-etf em.down {
    color: var(--color-down);
}
.stockhot-etf em.flat {
    color: var(--color-text-tertiary);
}
/* AI 解读折叠面板 */
.stockhot-analyse {
    margin-top: 6px;
    border-top: 1px dashed var(--color-border);
    padding-top: 6px;
}
.stockhot-analyse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--em-75);
    color: var(--color-primary-dark);
    font-weight: 500;
}
.stockhot-analyse-title i {
    transition: transform 0.3s;
}
.stockhot-analyse:not([data-collapsed="1"]) .stockhot-analyse-title i {
    transform: rotate(180deg);
}
.stockhot-analyse-body {
    margin-top: 6px;
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.stockhot-analyse[data-collapsed="1"] .stockhot-analyse-body {
    display: none;
}
.stockhot-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--em-86);
}
.stockhot-disclaimer {
    margin: 16px 0;
    padding: 10px 12px;
    background: var(--color-surface-tint);
    border-radius: var(--radius-sm);
    font-size: var(--em-65);
    color: var(--color-text-tertiary);
    line-height: 1.55;
    font-variant-east-asian: full-width;
}

/* ============================================================
   龙虎榜页（longhu.js 渲染）
   复用 stockhot-list / stockhot-item 等卡片样式
   ============================================================ */
.longhu-container {
    padding-bottom: var(--spacing-md);
}
.longhu-summary {
    margin-bottom: var(--spacing-md);
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.longhu-container .stockhot-disclaimer {
    margin-bottom: 0;
}
.longhu-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.longhu-summary-row + .longhu-summary-row {
    margin-top: 8px;
}
.longhu-cnt {
    font-size: var(--em-86);
    color: var(--color-text-secondary);
    font-variant-east-asian: full-width;
}
.longhu-cnt.up {
    color: var(--color-up);
}
.longhu-cnt.down {
    color: var(--color-down);
}
.longhu-cnt.flat {
    color: var(--color-text-tertiary);
}
.longhu-cnt.total {
    color: var(--color-text-primary);
    font-weight: 500;
    margin-left: auto;
}
.longhu-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-tint);
    color: var(--color-primary-dark);
    font-size: var(--em-65);
    font-variant-east-asian: full-width;
}
/* 龙虎榜列表项第二行的元数据（现价/成交/净买入），复用 row3 风格 */
.stockhot-row2 .stockhot-meta-item {
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-east-asian: full-width;
}
.stockhot-row2 .stockhot-meta-item em {
    font-style: normal;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}
.stockhot-row2 .stockhot-meta-item em.up {
    color: var(--color-up);
}
.stockhot-row2 .stockhot-meta-item em.down {
    color: var(--color-down);
}
.stockhot-row2 .stockhot-meta-item em.flat {
    color: var(--color-text-tertiary);
}

/* ============================================================
   板块榜页（block-list.js 渲染）
   复用 stockhot-list/item 样式，新增领涨股展示区
   ============================================================ */
.blocklist-container {
    padding-top: var(--spacing-md);
    padding-bottom: 24px;
}
/* ===== 股票量化页面 ===== */
.quant-container {
    padding-top: var(--spacing-md);
    padding-bottom: 24px;
}
/* 顶部 tab 滑块：footerSlot 独占一行，贴合按钮宽度，超出横向滚动 */
.quant-stock-tabs {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}
.quant-stock-tabs::-webkit-scrollbar {
    display: none;
}
.quant-stock-tabs .mode-btn {
    flex-shrink: 0;
}
.quant-signal-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.quant-signal-filter {
    display: flex;
    gap: 4px;
    flex: 1;
}
.quant-filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.quant-filter-btn.active {
    background: var(--color-primary, #667eea);
    border-color: var(--color-primary, #667eea);
    color: #fff;
}
.quant-board-filter {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.quant-board-filter::-webkit-scrollbar {
    display: none;
}
.quant-board-filter .quant-filter-btn {
    flex-shrink: 0;
    /* 与 .quant-filter-btn 保持一致的高度（信号筛选条/版块筛选条统一） */
    padding: 6px 12px;
    font-size: var(--fs-caption, 0.8rem);
}
.quant-scan-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-md, 10px);
    background: linear-gradient(135deg, var(--color-primary, #667eea), var(--color-primary-dark, #764ba2));
    color: #fff;
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.quant-scan-btn:active {
    transform: scale(0.95);
}
.quant-scan-btn:disabled {
    opacity: 0.6;
}
.quant-scan-btn .spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.quant-signal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-bg-secondary, rgba(0, 0, 0, 0.02));
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-secondary);
}
.quant-signal-summary.hidden {
    display: none;
}
.quant-signal-summary .up {
    color: var(--color-up, #f5495b);
}
.quant-signal-summary .down {
    color: var(--color-down, #00a870);
}
.quant-signal-summary .total {
    color: var(--color-text-primary);
    font-weight: 600;
}
.quant-signal-summary .snapshot-time,
.quant-hf-summary .snapshot-time,
.quant-strong-summary .snapshot-time {
    color: var(--color-text-tertiary, #999);
    font-size: var(--fs-caption-sm, 0.72rem);
}
.quant-signal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quant-signal-card {
    padding: 14px 16px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.quant-signal-card:active {
    transform: scale(0.98);
}
.quant-card-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}
.quant-card-name {
    font-size: var(--fs-body, 0.9rem);
    font-weight: 600;
    color: var(--color-text-primary);
}
.quant-card-code {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.quant-card-pct {
    margin-left: auto;
    font-size: var(--fs-body, 0.9rem);
    font-weight: 700;
}
.quant-card-pct.up {
    color: var(--color-up, #f5495b);
}
.quant-card-pct.down {
    color: var(--color-down, #00a870);
}
.quant-card-sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    margin-bottom: 10px;
    min-height: 0;
}
.quant-card-sectors:empty {
    display: none;
}
.quant-card-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 6px;
}
.quant-sig-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 600;
    line-height: 1.5;
}
.quant-sig-tag.sig-buy {
    background: rgba(245, 73, 91, 0.1);
    color: var(--color-up, #f5495b);
}
.quant-sig-tag.sig-sell {
    background: rgba(0, 168, 112, 0.1);
    color: var(--color-down, #00a870);
}
.quant-sig-tag.sig-watch {
    background: rgba(255, 152, 0, 0.1);
    color: var(--color-warning, #ff9500);
}
.quant-sig-strength {
    font-size: 0.6rem;
    opacity: 0.7;
    font-style: normal;
}
.quant-sig-tag.strength-strong {
    box-shadow: 0 0 0 1px currentColor inset;
}
/* 综合信号标签（抄底/跑路口诀）—— 醒目高亮 */
.quant-sig-tag.sig-buy.strength-strong,
.quant-sig-tag[data-type^="bottom_"] {
    background: linear-gradient(135deg, rgba(245, 73, 91, 0.18), rgba(245, 73, 91, 0.08));
    box-shadow:
        0 0 0 1.5px var(--color-up, #f5495b) inset,
        0 1px 4px rgba(245, 73, 91, 0.2);
    color: var(--color-up, #f5495b);
}
.quant-sig-tag.sig-sell.strength-strong,
.quant-sig-tag[data-type^="top_"] {
    background: linear-gradient(135deg, rgba(0, 168, 112, 0.18), rgba(0, 168, 112, 0.08));
    box-shadow:
        0 0 0 1.5px var(--color-down, #00a870) inset,
        0 1px 4px rgba(0, 168, 112, 0.2);
    color: var(--color-down, #00a870);
}
/* 综合信号前缀图标 */
.quant-sig-tag[data-type^="bottom_"]::before,
.quant-sig-tag[data-type^="top_"]::before,
.quant-sig-tag[data-type="shipping_signal"]::before,
.quant-sig-tag[data-type="break_ma20_at_high"]::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 2px;
    animation: quant-sig-pulse 1.4s ease-in-out infinite;
}
@keyframes quant-sig-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}
.quant-ind-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.quant-ind-row em {
    font-style: normal;
    color: var(--color-text-secondary);
    margin-left: 2px;
}
.quant-card-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 8px;
    margin-top: 10px;
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.quant-card-meta .qcm-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
}
/* 可编辑 cell（持仓/成本）：编辑图标内嵌在 label 中，紧贴文字，整体居中 */
.quant-card-meta .qcm-cell.qcm-shares-edit .qcm-cost-icon,
.quant-card-meta .qcm-cell.qcm-cost-edit .qcm-cost-icon {
    font-size: 11px;
    color: var(--color-text-quaternary, #bbb);
    transition: color 0.15s;
    pointer-events: none;
    margin-right: 2px;
    vertical-align: middle;
}
.quant-card-meta .qcm-label {
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1;
    text-align: center;
}
.quant-card-meta .qcm-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: center;
}
.quant-card-meta .qcm-value.up {
    color: var(--color-up, #f5495b);
}
.quant-card-meta .qcm-value.down {
    color: var(--color-down, #00a870);
}
@media (max-width: 380px) {
    .quant-card-meta {
        gap: 4px 6px;
    }
    .quant-card-meta .qcm-value {
        font-size: 12px;
    }
    .quant-card-meta .qcm-label {
        font-size: 10px;
    }
}
/* 幻方列表底部"加载更多"已统一到公共 LoadMoreBar（.lmb-bar 系列），原 .quant-load-more* 类已删除 */
.quant-disclaimer {
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 152, 0, 0.06);
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini, 0.7rem);
    line-height: 1.5;
    text-align: center;
}
/* 空提示条自动隐藏（避免初始空黄卡片） */
.quant-disclaimer:empty {
    display: none;
}
/* 统一风险提示条：放在 header 下方、tab 之下、各面板之上 */
.quant-disclaimer-bar {
    margin-top: 0;
    margin-bottom: 15px;
}

/* ===== 量化页右上角「更多」下拉菜单（参考 block-date-wrap） ===== */
.quant-more-wrap {
    position: relative;
    flex-shrink: 0;
}
.quant-more-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-md, 10px);
    background: var(--color-segment-bg);
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-tap-highlight-color: transparent;
}
.quant-more-btn:active {
    transform: scale(0.92);
}
.quant-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 120px;
    background: var(--color-surface, #fff);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 100;
    animation: quant-more-in 0.15s ease;
}
@keyframes quant-more-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.quant-more-menu.hidden {
    display: none;
}
.quant-more-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--fs-body, 0.9rem);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-more-opt i {
    font-size: 1rem;
    color: var(--color-text-tertiary);
}
.quant-more-opt:active {
    background: var(--color-surface-alt, #f5f5f5);
}
.quant-more-opt.active {
    color: var(--color-primary, #667eea);
    background: rgba(102, 126, 234, 0.08);
}
.quant-more-opt.active i {
    color: var(--color-primary, #667eea);
}
.quant-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--fs-body, 0.9rem);
}

/* ===== 幻方多因子打分卡片 ===== */
.quant-hf-card {
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    border-left: 3px solid var(--color-text-quaternary, #ccc);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.quant-hf-card:active {
    transform: scale(0.99);
}
/* ===== 加仓候选：强烈信号徽章 ===== */
.strong-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}
/* 加仓卡片第二行：纯文本显示，去掉 tag 胶囊样式 */
.strong-signal-row-plain {
    display: block !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    font-size: var(--fs-caption, 0.72rem);
    color: var(--color-text-secondary);
    line-height: 1.6;
    word-break: break-all;
    margin: 8px 0 10px;
}
.strong-signal-row-plain i {
    font-size: 0.9em;
    vertical-align: -1px;
    margin-right: 2px;
}
/* 综合评分：纯文本颜色，去掉胶囊 */
.composite-text {
    font-weight: 600;
}
.composite-text i {
    font-size: 0.9em;
    vertical-align: -1px;
    margin-right: 1px;
}
.composite-text.composite-high {
    color: #11998e;
}
.composite-text.composite-mid {
    color: #f7971e;
}
.composite-text.composite-low {
    color: #cb2d3e;
}
/* 建议持有：纯文本颜色，去掉胶囊 */
.hold-days-text {
    font-weight: 600;
    color: #11998e;
}
.hold-days-text i {
    font-size: 0.9em;
    vertical-align: -1px;
    margin-right: 2px;
}
.strong-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-caption, 0.72rem);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #f5495b, #ff6b2c);
    box-shadow: 0 1px 4px rgba(245, 73, 91, 0.3);
}
.strong-signal-badge i {
    font-size: 0.85em;
}
.quant-hf-card.hf-strong-buy {
    border-left-color: var(--color-up, #f5495b);
    background: linear-gradient(90deg, rgba(245, 73, 91, 0.04), var(--color-bg-card, #fff) 30%);
}
/* 加仓候选：扫描按钮行（放在版块筛选下方） */
.quant-strong-scan-row {
    display: flex;
    justify-content: flex-end;
    padding: 6px 0 0;
    margin-bottom: 8px;
}
/* 加仓候选：建议持有天数徽章（和信号徽章并列第二行，绿色时间系） */
.hold-days-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-caption, 0.72rem);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #11998e, #38ef7d);
    box-shadow: 0 1px 4px rgba(17, 153, 142, 0.3);
}
.hold-days-badge i {
    font-size: 0.85em;
}
.quant-hf-card.hf-buy {
    border-left-color: rgba(245, 73, 91, 0.6);
}
.quant-hf-card.hf-sell {
    border-left-color: rgba(0, 168, 112, 0.6);
}
.quant-hf-card.hf-strong-sell {
    border-left-color: var(--color-down, #00a870);
    background: linear-gradient(90deg, rgba(0, 168, 112, 0.04), var(--color-bg-card, #fff) 30%);
}
.quant-hf-card.hf-neutral {
    border-left-color: var(--color-text-quaternary, #ccc);
}
/* ===== 加仓候选：综合评分徽章 + PE/PB 估值标签 ===== */
.composite-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-caption, 0.72rem);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    box-shadow: 0 1px 4px rgba(106, 17, 203, 0.3);
}
.composite-badge i {
    font-size: 0.85em;
}
.composite-badge.composite-high {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    box-shadow: 0 1px 4px rgba(17, 153, 142, 0.3);
}
.composite-badge.composite-mid {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    box-shadow: 0 1px 4px rgba(247, 151, 30, 0.3);
}
.composite-badge.composite-low {
    background: linear-gradient(135deg, #cb2d3e, #ef473a);
    box-shadow: 0 1px 4px rgba(203, 45, 62, 0.3);
}
/* PE/PB 估值标签（加仓卡片底部 meta 用） */
.pe-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 600;
    line-height: 1.4;
}
.pe-tag.pe-low {
    color: #fff;
    background: rgba(17, 153, 142, 0.85);
}
.pe-tag.pe-mid {
    color: #fff;
    background: rgba(247, 151, 30, 0.85);
}
.pe-tag.pe-high {
    color: #fff;
    background: rgba(203, 45, 62, 0.85);
}
.pe-tag.pe-loss {
    color: #fff;
    background: rgba(120, 120, 120, 0.85);
}
.pe-tag.pe-na {
    color: var(--color-text-tertiary);
    background: rgba(0, 0, 0, 0.04);
}
/* 加仓页风险边界筛选条：复用 .quant-sc-controls 样式，略紧凑 */
.quant-strong-controls {
    padding: 10px 14px;
    margin-bottom: 10px;
}
.quant-strong-controls .quant-sc-row {
    flex-wrap: wrap;
    row-gap: 6px;
}
.quant-strong-controls .quant-sc-run {
    margin-left: auto;
}
/* 加仓页汇总条：当前筛选条件标签 */
.strong-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    margin-left: auto;
}
.strong-filter-tag i {
    font-size: 0.9em;
}
.strong-filter-tag.none {
    color: var(--color-text-tertiary);
    background: rgba(0, 0, 0, 0.04);
    font-weight: 400;
}
.quant-hf-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}
.quant-hf-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.hf-score-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}
.hf-score-label {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.hf-composite {
    margin-left: 6px;
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-secondary);
    font-weight: 500;
}
.quant-hf-suggestion {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
}
.quant-hf-suggestion i {
    font-size: 1rem;
}
.hf-strong-buy .quant-hf-suggestion,
.hf-buy .quant-hf-suggestion {
    background: rgba(245, 73, 91, 0.1);
    color: var(--color-up, #f5495b);
}
.hf-strong-sell .quant-hf-suggestion,
.hf-sell .quant-hf-suggestion {
    background: rgba(0, 168, 112, 0.1);
    color: var(--color-down, #00a870);
}
.hf-neutral .quant-hf-suggestion {
    background: var(--color-surface-alt, #f5f5f5);
    color: var(--color-text-secondary);
}
.quant-hf-reason {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
    margin-bottom: 10px;
    line-height: 1.4;
}
.quant-hf-factors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--color-surface-sunken, #fafafa);
    border-radius: var(--radius-sm, 8px);
}
.quant-hf-factor {
    display: grid;
    grid-template-columns: 32px 1fr 28px;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-mini, 0.7rem);
}
.hf-factor-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}
.hf-factor-bar {
    height: 4px;
    background: var(--color-border-lighter, rgba(0, 0, 0, 0.04));
    border-radius: 2px;
    overflow: hidden;
}
.hf-factor-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}
.hf-factor-fill.up {
    background: var(--color-up, #f5495b);
}
.hf-factor-fill.down {
    background: var(--color-down, #00a870);
}
.hf-factor-fill.flat {
    background: var(--color-text-quaternary, #ccc);
}
.hf-factor-score {
    text-align: right;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.quant-hf-factor .hf-factor-hint {
    display: none;
}

/* ===== 幻方因子权重滑块（可折叠，手机端友好） ===== */
.quant-hf-weights {
    margin: 0 0 15px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-sunken, #fafafa);
    border: 1px solid var(--color-border-lighter, rgba(0, 0, 0, 0.04));
    overflow: hidden;
}
.quant-hf-weights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-hf-weights-header:active {
    background: rgba(0, 0, 0, 0.03);
}
.quant-hf-weights-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.quant-hf-weights-summary > i {
    font-size: 1rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.quant-hf-weights-label {
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-primary);
    font-weight: 600;
    flex-shrink: 0;
}
.quant-hf-weights-tags {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
    font-style: normal;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.quant-hf-weights-chevron {
    font-size: 1.1rem;
    color: var(--color-text-tertiary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 6px;
}
.quant-hf-weights.expanded .quant-hf-weights-chevron {
    transform: rotate(180deg);
}
.quant-hf-weights-body {
    display: none;
    padding: 0 14px 12px;
}
.quant-hf-weights.expanded .quant-hf-weights-body {
    display: block;
}
.quant-hf-weights-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 4px;
    border-top: 1px dashed var(--color-border-lighter, rgba(0, 0, 0, 0.06));
}
.quant-hf-weight-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quant-hf-weight-item > span {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
    font-weight: 500;
    width: 32px;
    flex-shrink: 0;
}
.hf-weight-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-border-lighter, rgba(0, 0, 0, 0.08));
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.hf-weight-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, #667eea);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary, #667eea) 40%, transparent);
    cursor: pointer;
}
.hf-weight-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary, #667eea);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary, #667eea) 40%, transparent);
    cursor: pointer;
}
.hf-weight-val {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-primary);
    font-weight: 700;
    font-style: normal;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}
.quant-hf-weights-actions {
    display: flex;
    gap: 8px;
    padding-top: 10px;
}
.quant-hf-weights-reset,
.quant-hf-portfolio-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: var(--radius-md, 10px);
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 500;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    background: var(--color-bg-card, #fff);
    color: var(--color-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-hf-weights-reset:active,
.quant-hf-portfolio-btn:active {
    transform: scale(0.97);
}
.quant-hf-portfolio-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #667eea) 12%, transparent), color-mix(in srgb, var(--color-primary-dark, #764ba2) 12%, transparent));
    color: var(--color-primary, #667eea);
    border-color: color-mix(in srgb, var(--color-primary, #667eea) 30%, transparent);
    font-weight: 600;
}

/* ===== 幻方卡片主体（左主右雷达） ===== */
.quant-hf-body {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.quant-hf-main {
    flex: 1;
    min-width: 0;
}
.quant-hf-radar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hf-radar-canvas {
    display: block;
}

/* ===== 幻方 AI 解读 ===== */
.quant-hf-ai-wrap {
    margin-top: 10px;
}
.quant-hf-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 600;
    border: 1px solid rgba(102, 126, 234, 0.3);
    background: rgba(102, 126, 234, 0.08);
    color: #667eea;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-hf-ai-btn:active {
    transform: scale(0.96);
}
.quant-hf-ai-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.quant-hf-ai-btn i {
    font-size: 0.9rem;
}
.quant-hf-ai-text {
    padding: 8px 10px;
    border-radius: var(--radius-sm, 8px);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.04));
    border-left: 2px solid #667eea;
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}
.quant-hf-ai-text i {
    color: #667eea;
    margin-right: 4px;
    font-size: 0.9rem;
}

/* ===== 幻方组合回测弹窗 ===== */
.quant-portfolio-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quant-portfolio-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.quant-portfolio-card {
    position: relative;
    width: 92%;
    max-width: 540px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    -webkit-overflow-scrolling: touch;
}
.quant-portfolio-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--color-bg-card, #fff);
    border-bottom: 1px solid var(--color-border-lighter, rgba(0, 0, 0, 0.04));
    z-index: 1;
}
.quant-portfolio-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-title, 1rem);
    font-weight: 700;
    color: var(--color-text-primary);
}
.quant-portfolio-title i {
    color: #667eea;
}
.quant-portfolio-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-alt, #f5f5f5);
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-portfolio-body {
    padding: 14px 16px;
}
.quant-portfolio-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-tertiary);
    font-size: var(--fs-caption, 0.8rem);
}
.quant-portfolio-loading i {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
    color: #667eea;
}
.quant-portfolio-error {
    padding: 30px 20px;
    text-align: center;
    color: var(--color-down, #00a870);
    font-size: var(--fs-caption, 0.8rem);
}
.portfolio-stats {
    margin-bottom: 12px;
}
.portfolio-stat-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.portfolio-stat-main span {
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-secondary);
}
.portfolio-stat-main em {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: normal;
}
.portfolio-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.portfolio-stat-grid > div {
    padding: 8px 10px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface-sunken, #fafafa);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.portfolio-stat-grid span {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.portfolio-stat-grid em {
    font-size: var(--fs-body, 0.9rem);
    font-weight: 600;
    font-style: normal;
    color: var(--color-text-primary);
}
.portfolio-stat-grid em.up {
    color: var(--color-up, #f5495b);
}
.portfolio-stat-grid em.down {
    color: var(--color-down, #00a870);
}
.portfolio-stat-range {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
    text-align: center;
}
.portfolio-chart {
    display: block;
    margin: 8px 0 14px;
}
.portfolio-constituents {
    margin-bottom: 10px;
}
.portfolio-section-title {
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    padding-left: 2px;
}
.portfolio-constituent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface-sunken, #fafafa);
    font-size: var(--fs-mini, 0.7rem);
}
.portfolio-constituent .pc-name {
    flex: 1;
    font-weight: 600;
    color: var(--color-text-primary);
}
.portfolio-constituent .pc-code {
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini, 0.7rem);
}
.portfolio-constituent .pc-shares {
    color: var(--color-text-secondary);
}
.portfolio-constituent .pc-pnl {
    font-weight: 700;
    margin-left: auto;
}
.portfolio-constituent .pc-pnl.up {
    color: var(--color-up, #f5495b);
}
.portfolio-constituent .pc-pnl.down {
    color: var(--color-down, #00a870);
}
.portfolio-disclaimer {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-quaternary, #999);
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border-lighter, rgba(0, 0, 0, 0.04));
}

/* 开发中占位 */
.quant-coming-soon {
    padding: 60px 20px;
    text-align: center;
    color: var(--color-text-tertiary);
}
.quant-coming-soon i {
    font-size: 48px;
    color: var(--color-text-quaternary, rgba(0, 0, 0, 0.15));
    margin-bottom: 12px;
    display: block;
}
.quant-coming-soon h3 {
    font-size: var(--fs-title, 1rem);
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.quant-coming-soon p {
    font-size: var(--fs-caption, 0.8rem);
    margin-bottom: 4px;
}
.quant-coming-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.1);
    color: var(--color-primary, #667eea);
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 600;
}
/* ===== Phase 2：回测面板 ===== */
.quant-bt-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.quant-bt-code,
.quant-bt-strategy,
.quant-bt-days {
    padding: 6px 10px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 10px);
    background: var(--color-bg-card, #fff);
    color: var(--color-text-primary);
    font-size: var(--fs-caption, 0.8rem);
    outline: none;
}
.quant-bt-code {
    width: 140px;
}
.quant-bt-search-wrap {
    position: relative;
}
.quant-bt-search-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    min-width: 200px;
}
.quant-bt-run {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-md, 10px);
    background: linear-gradient(135deg, var(--color-primary, #667eea), var(--color-primary-dark, #764ba2));
    color: #fff;
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.quant-bt-run:disabled {
    opacity: 0.6;
}
.quant-bt-run .spin {
    animation: spin 1s linear infinite;
}
.quant-bt-stats {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}
.bt-stat-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.bt-stat-label {
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-tertiary);
}
.bt-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
}
.bt-stat-value.up {
    color: var(--color-up, #f5495b);
}
.bt-stat-value.down {
    color: var(--color-down, #00a870);
}
.bt-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
}
.bt-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bt-stat-item span {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.bt-stat-item em {
    font-size: var(--fs-body, 0.9rem);
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-primary);
}
.bt-stat-item em.up {
    color: var(--color-up, #f5495b);
}
.bt-stat-item em.down {
    color: var(--color-down, #00a870);
}
.bt-stat-range {
    margin-top: 8px;
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.quant-bt-chart-wrap {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    overflow-x: auto;
}
.quant-bt-chart {
    display: block;
    width: 100%;
}
.quant-bt-trades {
    margin-bottom: 12px;
}
.bt-trades-title {
    padding: 6px 0;
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.bt-trade-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.04));
    margin-bottom: 4px;
    font-size: var(--fs-mini, 0.7rem);
    flex-wrap: wrap;
}
.bt-trade-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.bt-trade-type.up {
    background: rgba(245, 73, 91, 0.1);
    color: var(--color-up, #f5495b);
}
.bt-trade-type.down {
    background: rgba(0, 168, 112, 0.1);
    color: var(--color-down, #00a870);
}
.bt-trade-date {
    color: var(--color-text-tertiary);
}
.bt-trade-price,
.bt-trade-shares {
    color: var(--color-text-secondary);
}
.bt-trade-amount {
    margin-left: auto;
    color: var(--color-text-primary);
    font-weight: 500;
}
.bt-trade-amount em {
    font-style: normal;
    margin-left: 4px;
}
.bt-trade-amount em.up {
    color: var(--color-up, #f5495b);
}
.bt-trade-amount em.down {
    color: var(--color-down, #00a870);
}
/* ===== Phase 3：选股面板 ===== */
.quant-sc-controls {
    padding: 12px 14px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    margin-bottom: 12px;
}
.quant-sc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-secondary);
}
.quant-sc-row:last-child {
    margin-bottom: 0;
}
.quant-sc-row label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.quant-sc-row select,
.quant-sc-row .sc-num {
    padding: 4px 8px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--fs-caption, 0.8rem);
    outline: none;
    width: 70px;
}
.quant-sc-row select {
    width: auto;
}
.quant-sc-run {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-md, 10px);
    background: linear-gradient(135deg, var(--color-primary, #667eea), var(--color-primary-dark, #764ba2));
    color: #fff;
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-sc-run:disabled {
    opacity: 0.6;
}
.quant-sc-run .spin {
    animation: spin 1s linear infinite;
}
/* 重新扫描按钮：次要按钮风格（不抢筛选按钮的主视觉） */
.quant-sc-run.quant-sc-rescan {
    margin-left: 8px;
    background: var(--color-card-bg, #fff);
    color: var(--color-text-primary, #333);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.quant-sc-run.quant-sc-rescan:active {
    transform: scale(0.97);
}
.quant-sc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quant-sc-card {
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-sc-card:active {
    transform: scale(0.98);
}
/* ===== Phase 4：模拟盘面板 ===== */
.quant-pp-summary {
    padding: 14px;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(135deg, #e8f1ff, #dce8fa);
    color: var(--color-text-primary);
    margin-bottom: 12px;
}
/* 黑金主题：汇总条背景改用浅金渐变 */
[data-theme="alipay-black-s2"] .quant-pp-summary {
    background: linear-gradient(135deg, #fff8d6, #f5e9b8);
}
.pp-summary-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.pp-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-summary-item span {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.pp-summary-item em {
    font-size: var(--fs-body, 0.9rem);
    font-style: normal;
    font-weight: 600;
}
.pp-summary-item em.up {
    color: var(--color-up, #f5495b);
}
.pp-summary-item em.down {
    color: var(--color-down, #00a870);
}
.quant-pp-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.quant-pp-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: var(--color-bg-card, #fff);
    color: var(--color-text-secondary);
    font-size: var(--fs-body, 0.9rem);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.15s,
        border-color 0.15s,
        transform 0.1s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.quant-pp-btn i {
    font-size: 1.05em;
}
/* 买入：红浅底 + 红边框 + 红字 */
.quant-pp-btn.buy {
    background: rgba(245, 73, 91, 0.08);
    border-color: rgba(245, 73, 91, 0.25);
    color: var(--color-up, #f5495b);
}
/* 卖出：绿浅底 + 绿边框 + 绿字 */
.quant-pp-btn.sell {
    background: rgba(0, 168, 112, 0.08);
    border-color: rgba(0, 168, 112, 0.25);
    color: var(--color-down, #00a870);
}
/* 重置：灰浅底 + 灰边框 */
.quant-pp-btn.reset {
    background: rgba(120, 120, 130, 0.06);
    border-color: rgba(120, 120, 130, 0.18);
    color: var(--color-text-tertiary);
}
@media (hover: hover) {
    .quant-pp-btn.buy:hover {
        background: rgba(245, 73, 91, 0.14);
        border-color: rgba(245, 73, 91, 0.4);
    }
    .quant-pp-btn.sell:hover {
        background: rgba(0, 168, 112, 0.14);
        border-color: rgba(0, 168, 112, 0.4);
    }
    .quant-pp-btn.reset:hover {
        background: rgba(120, 120, 130, 0.12);
        border-color: rgba(120, 120, 130, 0.3);
    }
}
.quant-pp-btn:active {
    transform: scale(0.97);
}
.pp-section-title {
    padding: 6px 0;
    font-size: var(--fs-caption, 0.8rem);
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* 持仓卡片：复用 quant-hf-card 基础样式，仅添加左侧色条 */
.pp-holding-card {
    border-left: 3px solid var(--color-text-quaternary, #ccc);
}
/* 删除持仓按钮：header 右上角小垃圾桶，与股票名称水平对齐 */
.pp-h-del-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--color-text-quaternary, #bbb);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    align-self: center;
    margin-left: 4px;
}
.pp-h-del-btn:active {
    background: rgba(245, 73, 91, 0.1);
    color: var(--color-up, #f5495b);
}
@media (hover: hover) {
    .pp-h-del-btn:hover {
        background: rgba(245, 73, 91, 0.1);
        color: var(--color-up, #f5495b);
    }
}
/* 建议 tag 占位：独占一行，紧贴股票名称下方 */
.pp-holding-card .quant-card-header {
    margin-bottom: 2px;
    align-items: center;
}
.pp-h-advice-tag-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 8px;
    min-height: 14px;
}
/* 持仓建议详情区：卡片底部，仅在有内容时显示 */
.pp-h-advice {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-h-advice:empty {
    display: none;
}
.pp-advice-hint {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}
.pp-advice-loading {
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini, 0.7rem);
    animation: advice-blink 1.2s ease-in-out infinite;
}
@keyframes advice-blink {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}
/* 建议标签（5 种颜色） */
.pp-advice-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-mini, 0.7rem);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.pp-advice-tag i {
    font-size: 1em;
}
.pp-advice-tag em {
    font-style: normal;
}
.advice-strong-buy {
    background: rgba(245, 73, 91, 0.15);
    color: #f5495b;
}
.advice-buy {
    background: rgba(255, 125, 0, 0.12);
    color: #ff7d00;
}
.advice-strong-sell {
    background: rgba(0, 168, 112, 0.15);
    color: #00a870;
}
.advice-sell {
    background: rgba(0, 150, 136, 0.12);
    color: #009688;
}
.advice-hold {
    background: rgba(120, 120, 120, 0.1);
    color: var(--color-text-secondary);
}
/* 建议详情（理由 + 元数据） */
.pp-advice-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pp-advice-reason {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.pp-advice-meta {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.pp-advice-meta em {
    font-style: normal;
    color: var(--color-text-quaternary, #999);
    margin-right: 2px;
}
.pp-trade-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.04));
    margin-bottom: 4px;
    font-size: var(--fs-mini, 0.7rem);
    flex-wrap: wrap;
}
.pp-t-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.pp-t-type.up {
    background: rgba(245, 73, 91, 0.1);
    color: var(--color-up, #f5495b);
}
.pp-t-type.down {
    background: rgba(0, 168, 112, 0.1);
    color: var(--color-down, #00a870);
}
.pp-t-name {
    color: var(--color-text-primary);
    font-weight: 500;
}
.pp-t-shares,
.pp-t-price {
    color: var(--color-text-secondary);
}
.pp-t-amount {
    margin-left: auto;
    color: var(--color-text-primary);
}
.pp-t-amount em {
    font-style: normal;
    margin-left: 4px;
}
.pp-t-amount em.up {
    color: var(--color-up, #f5495b);
}
.pp-t-amount em.down {
    color: var(--color-down, #00a870);
}
.pp-t-date {
    color: var(--color-text-tertiary);
}
/* ===== 信号汇总条内的状态标签（非加载条，是统计栏内的状态提示） ===== */
.quant-signal-summary .loading-more-hint {
    color: var(--color-primary, #667eea);
}
.quant-signal-summary .scan-done {
    color: var(--color-text-quaternary);
}
/* ===== 买入弹窗（复用 compare-modal 范式：底部弹出 + mask + 卡片） ===== */
.quant-trade-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
}
.quant-trade-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: holdings-modal-mask-in 0.2s ease;
}
.quant-trade-card {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: var(--color-surface, #fff);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: compare-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.quant-trade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--color-border-lighter);
    flex-shrink: 0;
}
.quant-trade-title {
    font-size: var(--em-105, 1.05rem);
    font-weight: 600;
    color: var(--color-text-primary);
}
.quant-trade-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--color-surface-alt);
    border-radius: 50%;
    color: var(--color-text-secondary);
    font-size: var(--fs-16, 1rem);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.quant-trade-close:active {
    transform: scale(0.9);
    background: var(--color-border);
}
.quant-trade-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 20px;
}
.quant-trade-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-alt, #f5f5f5);
    margin-bottom: 8px;
}
.quant-trade-search i {
    color: var(--color-text-tertiary);
    font-size: 1rem;
}
.quant-trade-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--fs-body, 0.9rem);
    color: var(--color-text-primary);
}
.quant-trade-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.qt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.qt-item:active {
    background: var(--color-surface-alt);
}
.qt-item-name {
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: var(--fs-body, 0.9rem);
}
.qt-item-code {
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini, 0.7rem);
}
.qt-empty {
    padding: 20px 0;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini, 0.7rem);
}
.quant-trade-selected {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    background: rgba(102, 126, 234, 0.06);
    margin-bottom: 8px;
}
.quant-trade-selected.hidden {
    display: none;
}
.qt-sel-name {
    color: var(--color-text-primary);
    font-weight: 600;
}
.qt-sel-code {
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini, 0.7rem);
}
.quant-trade-shares {
    margin-bottom: 12px;
}
.quant-trade-shares.hidden {
    display: none;
}
.quant-trade-shares label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption, 0.8rem);
}
.quant-trade-shares input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    font-size: var(--fs-body, 0.9rem);
    color: var(--color-text-primary);
    outline: none;
}
.quant-trade-confirm {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(135deg, var(--color-up, #f5495b), #e63950);
    color: #fff;
    font-size: var(--fs-body, 0.9rem);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.quant-trade-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.quant-trade-confirm:active:not(:disabled) {
    transform: scale(0.98);
}
/* ========== 模拟盘买入弹框（新设计） ========== */
.quant-trade-footer {
    display: flex;
    gap: 10px;
    padding: 12px 15px 15px;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    background: var(--color-bg-card, #fff);
    border-bottom-left-radius: var(--radius-lg, 16px);
    border-bottom-right-radius: var(--radius-lg, 16px);
}
.qt-foot-cancel {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 10px 18px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    color: var(--color-text-secondary);
    font-size: var(--fs-body, 0.9rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.qt-foot-cancel:active {
    background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
}
.quant-trade-footer .quant-trade-confirm {
    flex: 1 1 auto;
    margin: 0;
}
.qt-empty-tip {
    padding: 20px 12px;
    text-align: center;
    color: var(--color-text-tertiary, #999);
    font-size: var(--fs-caption, 0.8rem);
}
.qt-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 12px;
}
.qt-tag {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-bg-soft, rgba(0, 0, 0, 0.04));
    color: var(--color-text-secondary);
    font-size: var(--fs-caption, 0.78rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.qt-tag:active {
    background: var(--color-bg-hover, rgba(0, 0, 0, 0.08));
}
.qt-picked {
    padding: 0;
}
.qt-picked-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--color-bg-soft, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-md, 12px);
    margin-bottom: 8px;
}
.qt-picked-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.qt-picked-name {
    font-size: var(--fs-h4, 1rem);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.2;
}
.qt-picked-code {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.qt-picked-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background: var(--color-bg-card, #fff);
    color: var(--color-text-secondary);
    font-size: var(--fs-mini, 0.7rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.qt-picked-change:active {
    background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
}
.qt-picked-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 14px 12px;
}
.qt-picked-price-val {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.qt-picked-price-chg {
    font-size: var(--fs-caption, 0.8rem);
    font-variant-numeric: tabular-nums;
}
.qt-picked-price-chg.up {
    color: var(--color-up, #f5495b);
}
.qt-picked-price-chg.down {
    color: var(--color-down, #00a870);
}
.qt-shares-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 8px;
}
.qt-mode-tabs {
    display: flex;
    gap: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    background: var(--color-bg-soft, rgba(0, 0, 0, 0.03));
}
.qt-mode-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px 0;
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}
.qt-mode-tab.active {
    background: var(--color-bg-card, #fff);
    color: var(--color-text-primary);
    font-weight: 600;
}
.qt-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qt-amount-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-bg-card, #fff);
}
.qt-amount-prefix {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: var(--fs-h4, 1rem);
    font-weight: 600;
    color: var(--color-text-tertiary);
}
.qt-amount-input input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 8px 8px 8px 0;
    text-align: left;
    font-size: var(--fs-h4, 1rem);
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
}
.qt-amount-input input::-webkit-outer-spin-button,
.qt-amount-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qt-shares-label {
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-secondary);
}
.qt-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-bg-card, #fff);
}
.qt-step-btn {
    flex: 0 0 44px;
    border: none;
    background: var(--color-bg-soft, rgba(0, 0, 0, 0.03));
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.qt-step-btn:active {
    background: var(--color-bg-hover, rgba(0, 0, 0, 0.08));
}
.qt-stepper input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-size: var(--fs-h4, 1rem);
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
}
.qt-stepper input::-webkit-outer-spin-button,
.qt-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qt-shares-hint {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.qt-summary {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-soft, rgba(0, 0, 0, 0.03));
}
.qt-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-caption, 0.8rem);
    color: var(--color-text-secondary);
    padding: 3px 0;
}
.qt-summary-row em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
/* ===== 模拟盘：成本/股数 cell 可点击 + 修改弹窗（居中） ===== */
.qcm-cost-edit,
.qcm-shares-edit {
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    border-radius: 6px;
    transition: background 0.15s;
}
.qcm-cost-edit:active,
.qcm-shares-edit:active {
    background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
}
.qcm-cost-icon {
    font-size: 11px;
    color: var(--color-text-quaternary, #bbb);
    transition: color 0.15s;
    pointer-events: none;
    margin-right: 2px;
}
@media (hover: hover) {
    .qcm-cost-edit:hover .qcm-cost-icon,
    .qcm-shares-edit:hover .qcm-cost-icon {
        color: var(--color-primary, #667eea);
    }
}
.pp-edit-cost-modal .quant-trade-card {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: 420px;
    margin: 0 auto;
    left: 0;
    right: 0;
    max-height: 85vh;
    border-radius: var(--radius-lg, 16px);
    animation: pp-edit-cost-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pp-edit-cost-in {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}
.pp-edit-cost-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0 12px;
}
.pp-edit-cost-name {
    font-size: var(--fs-h4, 1rem);
    font-weight: 600;
    color: var(--color-text-primary);
}
.pp-edit-cost-code {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
}
.pp-edit-cost-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-bg-card, #fff);
    margin-bottom: 6px;
}
.pp-edit-cost-prefix {
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: var(--fs-h4, 1rem);
    font-weight: 600;
    color: var(--color-text-tertiary);
}
.pp-edit-cost-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 12px 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
}
.pp-edit-cost-input::-webkit-outer-spin-button,
.pp-edit-cost-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pp-edit-cost-hint {
    font-size: var(--fs-mini, 0.7rem);
    color: var(--color-text-tertiary);
    margin-bottom: 12px;
}
.pp-edit-cost-preview {
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-soft, rgba(0, 0, 0, 0.03));
}
.pp-edit-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: var(--fs-caption, 0.8rem);
}
.pp-edit-cost-row span {
    color: var(--color-text-secondary);
}
.pp-edit-cost-row em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.pp-edit-cost-row em.up {
    color: var(--color-up, #f5495b);
}
.pp-edit-cost-row em.down {
    color: var(--color-down, #00a870);
}
/* tab 切换器：默认展示 3 个，超出部分横向滑动
   max-width 由 block-list.js 根据前 3 个按钮实际宽度动态设置 */
#blockTabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
#blockTabs::-webkit-scrollbar {
    display: none;
}
#blockTabs .mode-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
/* —— 板块榜日期切换按钮 + 下拉菜单 —— */
.block-date-wrap {
    position: relative;
    flex-shrink: 0;
}
.block-date-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: var(--color-text-on-primary);
    font-size: var(--fs-caption);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.block-date-btn:active {
    transform: scale(0.95);
}
.block-date-btn.active {
    background: var(--glass-bg-active);
}
.block-date-btn i {
    font-size: var(--fs-subtitle);
}
.block-date-label {
    line-height: 1;
}
/* 下拉菜单：白底玻璃风格（与项目其他面板一致） */
.block-date-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 110px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.block-date-menu.hidden {
    display: none;
}
.block-date-opt {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.block-date-opt:active {
    background: rgba(0, 0, 0, 0.05);
}
.block-date-opt.active {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb, 102, 126, 234), 0.1);
    font-weight: 600;
}
.block-date-divider {
    height: 1px;
    margin: 2px 8px;
    background: var(--color-border, rgba(0, 0, 0, 0.06));
}
.blocklist-leads {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}
/* 板块榜缓存提示条：接口失败时显示缓存数据附带的提示 */
.block-cache-notice {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.25);
    color: var(--color-warning, #ff9500);
    font-size: var(--em-75, 0.75rem);
    line-height: 1.5;
    text-align: center;
}
.block-cache-notice.hidden {
    display: none;
}
/* 加减仓信号标签：基于主力资金参与度（主力净流入/成交额）+ 涨跌方向综合判断 */
.blocklist-sig {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--em-70, 0.7rem);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    align-self: center;
}
/* 加仓系：红色调（与涨色一致） */
.blocklist-sig.sig-strong-add {
    background: var(--color-up);
    color: #fff;
}
.blocklist-sig.sig-add {
    background: rgba(255, 59, 48, 0.18);
    color: var(--color-up);
}
.blocklist-sig.sig-weak-add {
    background: rgba(255, 59, 48, 0.08);
    color: var(--color-up);
}
/* 减仓系：绿色调（与跌色一致） */
.blocklist-sig.sig-strong-cut {
    background: var(--color-down);
    color: #fff;
}
.blocklist-sig.sig-cut {
    background: rgba(52, 199, 89, 0.18);
    color: var(--color-down);
}
.blocklist-sig.sig-weak-cut {
    background: rgba(52, 199, 89, 0.08);
    color: var(--color-down);
}
/* 背离信号：橙色警示 */
.blocklist-sig.sig-top-divergence {
    background: rgba(255, 152, 0, 0.18);
    color: var(--color-warning);
}
.blocklist-sig.sig-bottom-divergence {
    background: rgba(102, 126, 234, 0.18);
    color: var(--color-primary);
}
.blocklist-lead {
    font-size: var(--em-75);
    color: var(--color-text-secondary);
    font-variant-east-asian: full-width;
    cursor: pointer;
}
.blocklist-lead em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}
.blocklist-lead em.up {
    color: var(--color-up);
}
.blocklist-lead em.down {
    color: var(--color-down);
}
.blocklist-lead em.flat {
    color: var(--color-text-tertiary);
}
.blocklist-lead:active {
    opacity: 0.6;
}

/* ============================================================
   个股详情页（stock-detail.js 渲染）
   数据源：同花顺 d.10jqka.com.cn 行情域
   页面结构：价格区 → 行情卡片 → 成交卡片 → K线图 → 区间收益 → 风险提示
   ============================================================ */
/* 价格区：大字号现价 + 涨跌额/涨跌幅 */
.sd-price-section {
    margin-bottom: 10px;
    padding: 0;
    background: linear-gradient(180deg, var(--color-surface-tint) 0%, transparent 100%);
}
.sd-price-name {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.sd-price-name-text {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--color-text-primary);
}
.sd-price-code {
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    font-weight: 400;
}
.sd-status {
    margin-left: auto;
    padding: 1px 6px;
    background: var(--color-surface-tint);
    border-radius: 3px;
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
    font-weight: 500;
}
.sd-status.up {
    color: var(--color-up);
    background: rgba(255, 59, 48, 0.08);
}
.sd-status.down {
    color: var(--color-down);
    background: rgba(52, 199, 89, 0.08);
}
.sd-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.sd-price {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.sd-price.up,
.sd-change.up {
    color: var(--color-up);
}
.sd-price.down,
.sd-change.down {
    color: var(--color-down);
}
.sd-price.flat,
.sd-change.flat {
    color: var(--color-text-secondary);
}
.sd-change {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--fs-subtitle);
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.sd-change-abs {
    font-size: var(--fs-body);
}
.sd-change-pct {
    font-size: var(--fs-subtitle);
    padding: 1px 6px;
    background: var(--color-surface-tint);
    border-radius: 3px;
}
.sd-change.up .sd-change-pct {
    background: rgba(255, 59, 48, 0.08);
}
.sd-change.down .sd-change-pct {
    background: rgba(52, 199, 89, 0.08);
}
.sd-change.flat .sd-change-pct {
    background: var(--color-surface-tint);
}
.sd-price-meta {
    display: flex;
    gap: 10px;
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
}

/* 所属板块标签区 */
.sd-sections {
    padding: 0 0 10px 0;
}
.sd-sectors-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.sd-sector-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-size: var(--em-65);
    font-weight: 400;
    line-height: 1.5;
}
.sd-sector-tag.sd-sector-industry {
    background: var(--tag-orange-bg);
    color: var(--tag-orange-text);
}
.sd-sector-tag.sd-sector-area {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}

/* 通用卡片 */
.sd-card {
    margin-bottom: var(--spacing-md);
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sd-card-title {
    font-size: var(--fs-subtitle);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sd-card-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
}
.sd-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-cell-label {
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
}
.sd-cell-value {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.sd-cell-value.up {
    color: var(--color-up);
}
.sd-cell-value.down {
    color: var(--color-down);
}

/* 分时图时间标签 - 确保午休分隔线两侧标签不重叠 */
.sd-timeline-wrap svg text {
    pointer-events: none;
}

/* 基金详情页 - 持仓行：占比(左) + 涨跌幅(右) */
#fdHoldingsBody .sd-cell-value {
    flex-direction: row;
    align-items: baseline;
}
.fd-hold-row.fd-hold-clickable {
    cursor: pointer;
    transition: background 0.12s;
}
.fd-hold-row.fd-hold-clickable:active {
    background: var(--color-surface-tint, #f5f5f7);
}
.fd-hold-ratio {
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
}
.fd-hold-change {
    margin-left: auto;
    font-size: var(--fs-body);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.fd-hold-change.up {
    color: var(--color-up);
}
.fd-hold-change.down {
    color: var(--color-down);
}
.fd-hold-change.flat {
    color: var(--color-text-tertiary);
}

/* K线图区 */
.sd-kline-periods {
    display: flex;
    gap: 4px;
}
.sd-kline-btn {
    padding: 3px 10px;
    font-size: var(--fs-caption);
    background: var(--color-surface-tint);
    border: none;
    border-radius: 4px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.sd-kline-btn.active {
    background: var(--color-primary, #3d4fb0);
    color: #fff;
}
.sd-kline-wrap {
    width: 100%;
    overflow: hidden;
}
.sd-kline-svg {
    width: 100%;
    height: auto;
    display: block;
}
.sd-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--fs-caption);
}

/* 分时图区 */
.sd-timeline-wrap {
    width: 100%;
    overflow: hidden;
}
.sd-timeline-meta {
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* 风险提示 */
.sd-disclaimer {
    margin-bottom: 10px;
    padding: 10px;
    background: var(--color-surface-tint);
    border-radius: var(--radius-sm);
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
    line-height: 1.55;
}

/* ============================================================
   基金详情页 - 限额历史时间轴（P2 新增）
   ============================================================ */
.fd-limit-sub {
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
    font-weight: normal;
    margin-left: 6px;
}
/* 时间轴：变化事件列表 */
.fd-limit-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fd-limit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-tint);
    border-left: 3px solid var(--color-text-tertiary);
}
.fd-limit-item i {
    font-size: 18px;
    flex-shrink: 0;
}
.fd-limit-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.fd-limit-desc {
    font-size: var(--fs-caption);
    color: var(--color-text-primary);
    line-height: 1.4;
}
.fd-limit-time {
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
}
/* 变化类型高亮：放宽=红/放开=绿/收紧=橙/信息=灰 */
.fd-limit-up {
    border-left-color: var(--color-up, #e74c3c);
}
.fd-limit-up i {
    color: var(--color-up, #e74c3c);
}
.fd-limit-open {
    border-left-color: var(--color-down, #2ecc71);
}
.fd-limit-open i {
    color: var(--color-down, #2ecc71);
}
.fd-limit-down {
    border-left-color: #f39c12;
}
.fd-limit-down i {
    color: #f39c12;
}
.fd-limit-info i {
    color: var(--color-text-tertiary);
}
/* 稳定状态：近 N 天无变化 */
.fd-limit-stable {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
}
.fd-limit-stable i {
    font-size: 18px;
    color: var(--color-down, #2ecc71);
}
.fd-limit-stable-detail {
    color: var(--color-text-tertiary);
    font-size: var(--fs-mini);
    margin-left: auto;
}
/* 首尾快照对比 */
.fd-limit-compare {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}
.fd-limit-compare-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.fd-limit-compare-date {
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
}
.fd-limit-compare-val {
    font-size: var(--fs-caption);
    color: var(--color-text-primary);
    line-height: 1.4;
}
.fd-limit-compare > i {
    font-size: 18px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

/* ============================================================
   同花顺财经新闻页（stock-news.js）
   ============================================================ */
/* 频道滑块：footerSlot 独占一行，横向滚动 */
.sn-channels {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 14px;
}
.sn-channels::-webkit-scrollbar {
    display: none;
}
.sn-channels .mode-btn {
    padding: 5px 12px;
    flex-shrink: 0;
}
/* 旧 .sn-item* 样式已废弃，列表项统一使用 .news-card* 公共组件样式 */

/* ============================================================
   同花顺财经新闻详情页（news-detail.js）
   ============================================================ */
.nd-title {
    font-size: var(--fs-title-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 10px;
}
.nd-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
}
.nd-tag {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(255, 36, 54, 0.1);
    color: #ff2436;
    border-radius: 3px;
    font-size: var(--fs-mini);
    line-height: 1.5;
}
.nd-content {
    margin-bottom: 10px;
    font-size: var(--fs-body);
    color: var(--color-text-primary);
    line-height: 1.75;
    word-break: break-word;
}
/* 强制所有子元素继承正文字号/行高/颜色，避免同花顺残留 style/class 干扰 */
.nd-content span,
.nd-content font,
.nd-content div {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.nd-content p {
    margin: 0 0 14px;
    text-indent: 2em;
}
/* 章节小标题：<h2><strong>xxx</strong></h2> —— 收紧到略大于正文，避免浏览器默认 24px 过大 */
.nd-content h2,
.nd-content h3,
.nd-content h4 {
    margin: 18px 0 10px;
    padding: 0;
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
    text-indent: 0;
    background: none;
    border: none;
}
.nd-content h2 {
    font-size: var(--fs-title-lg);
}
/* 加粗文本：只加粗不变大 */
.nd-content strong,
.nd-content b {
    font-weight: 600;
    color: inherit;
}
/* 链接：主色 + 下划线 */
.nd-content a {
    color: var(--color-primary, #667eea);
    text-decoration: none;
    text-indent: 0;
}
.nd-content a:hover {
    text-decoration: underline;
}
/* 列表：保留缩进 */
.nd-content ul,
.nd-content ol {
    margin: 0 0 14px;
    padding-left: 1.5em;
    text-indent: 0;
}
.nd-content li {
    margin: 4px 0;
    line-height: 1.7;
}
/* 引用块 */
.nd-content blockquote {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-left: 3px solid var(--color-border);
    background: var(--color-surface-sunken, rgba(0, 0, 0, 0.02));
    color: var(--color-text-secondary);
    font-size: var(--fs-body);
    text-indent: 0;
    border-radius: 0 4px 4px 0;
}
.nd-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: var(--radius-sm);
}
.nd-footer {
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-mini);
    color: var(--color-text-tertiary);
    line-height: 1.55;
}

/* ============================================================
   基金扫描进度弹框（scan-modal.js 渲染）
   参考 source-selector-modal / sector-editor-modal 范式：mask + card + 弹簧动画
   ============================================================ */
.scan-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.scan-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}

.scan-modal-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    max-height: 85vh;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.scan-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.scan-modal-title {
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.scan-badge {
    font-size: var(--fs-12);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 1.4;
}
.scan-badge.idle {
    background: var(--color-surface-sunken);
    color: var(--color-text-tertiary);
}
.scan-badge.scanning {
    background: rgba(102, 126, 234, 0.12);
    color: var(--color-primary);
}
.scan-badge.scanning::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 5px;
    vertical-align: middle;
    animation: scan-pulse 1s ease-in-out infinite;
}
@keyframes scan-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}
.scan-badge.done {
    background: rgba(76, 175, 80, 0.12);
    color: #4caf50;
}

.scan-modal-close {
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.scan-modal-close:active {
    background: var(--color-surface-sunken);
}

.scan-modal-body {
    padding: 12px 16px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 进度区 */
.scan-progress-wrap {
    margin-bottom: 12px;
}
.scan-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.scan-step-label {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-text-primary);
}
.scan-progress-pct {
    font-size: var(--fs-13);
    color: #3b82f6;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.scan-progress-track {
    width: 100%;
    height: 8px;
    background: var(--color-surface-sunken);
    border-radius: 4px;
    overflow: hidden;
}
.scan-progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
    transition: width 0.4s ease;
    width: 0%;
}
.scan-detail {
    margin-top: 6px;
    font-size: var(--fs-12);
    color: var(--color-text-tertiary);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 统计区标题 */
.scan-stats-title {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px 0 10px;
}

/* 数据统计区：单容器内 flex 均分，标签上数值下 */
.scan-stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
}
.scan-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 30%;
    min-width: 0;
}
.scan-stat-label {
    font-size: var(--fs-11);
    color: var(--color-text-tertiary);
    margin-bottom: 3px;
}
.scan-stat-value {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
    text-align: center;
}

/* 元信息列表 */
.scan-meta-list {
    margin-bottom: 12px;
}
.scan-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.scan-meta-row:last-child {
    border-bottom: none;
}
.scan-meta-label {
    font-size: var(--fs-12);
    color: var(--color-text-tertiary);
}
.scan-meta-value {
    font-size: var(--fs-12);
    color: var(--color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}
.scan-meta-sub {
    color: var(--color-text-quaternary);
    font-weight: 400;
}

/* 触发按钮 */
.scan-trigger-btn {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--fs-14);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}
.scan-trigger-btn:active {
    opacity: 0.85;
}
.scan-trigger-btn:disabled {
    background: var(--color-text-quaternary);
    cursor: not-allowed;
    opacity: 0.7;
}

.scan-tip {
    margin-top: 10px;
    font-size: var(--fs-12);
    color: var(--color-text-quaternary);
    line-height: 1.5;
    text-align: center;
}

/* ============================================================
   路由容器(每次切换销毁重建)
   ============================================================ */
.route-container {
    display: none;
}
.route-container.active {
    display: block;
}
/* 新页面非 header 内容淡入;header 保持稳定不闪 */
.route-container.active > *:not(.header) {
    animation: route-fade-in 0.25s ease-out;
}
@keyframes route-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* tiantian-rank 页面 #app 为 flex column 布局,route-container 需适配 */
body.page-tiantian-rank .route-container.active {
    display: block;
}

/* ============================================================
   量化选基页面样式
   ============================================================ */

.quant-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 公共 Header 折叠/展开容器 */
.header-collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 800px;
}
.header-collapsible.collapsed {
    max-height: 0;
}
/* 折叠按钮：展开时箭头旋转180°朝上，折叠时朝下 */
.header-collapse-btn i {
    transition: transform 0.3s ease;
}
.header-collapse-btn.expanded i {
    transform: rotate(180deg);
}

/* 结果摘要 */
.quant-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    font-size: var(--em-78);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.quant-summary b {
    color: var(--color-text-primary);
    font-weight: 700;
}
.quant-summary-period {
    color: var(--color-primary);
    font-weight: 500;
}
.quant-summary-time {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-size: var(--em-72);
}

/* 量化得分标签（fund-tags 内，与 sector/size/streak 同行小标签风格） */
.quant-score-tag {
    display: inline-block;
    font-size: var(--em-62);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    margin-left: 3px;
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
}
.quant-score-tag.high {
    background: rgba(52, 199, 89, 0.12);
    color: var(--color-down-dark);
}
.quant-score-tag.mid {
    background: rgba(255, 152, 0, 0.12);
    color: var(--color-warning-dark);
}
.quant-score-tag.low {
    background: var(--color-surface-sunken);
    color: var(--color-text-tertiary);
}

/* 评级星标（fund-name 内） */
.quant-level-stars {
    color: var(--color-gold);
    font-size: var(--em-72);
    letter-spacing: -1px;
    flex-shrink: 0;
    margin-left: 2px;
}

/* 规模标签（fund-tags 内，通用：rankings/quant/tail-rush 共用） */
.size-tag {
    display: inline-block;
    font-size: var(--em-62);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
    font-weight: 500;
    white-space: nowrap;
}

/* 基金板块加减仓信号标签（fund-tags 组件）
   基于 fund.sector 从同花顺板块榜查询信号，颜色与板块榜一致但尺寸更小 */
.fund-sig-tag {
    display: inline-block;
    font-size: var(--em-62);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.fund-sig-tag.sig-strong-add {
    background: var(--color-up);
    color: #fff;
}
.fund-sig-tag.sig-add {
    background: rgba(255, 59, 48, 0.18);
    color: var(--color-up);
}
.fund-sig-tag.sig-weak-add {
    background: rgba(255, 59, 48, 0.08);
    color: var(--color-up);
}
.fund-sig-tag.sig-strong-cut {
    background: var(--color-down);
    color: #fff;
}
.fund-sig-tag.sig-cut {
    background: rgba(52, 199, 89, 0.18);
    color: var(--color-down);
}
.fund-sig-tag.sig-weak-cut {
    background: rgba(52, 199, 89, 0.08);
    color: var(--color-down);
}
.fund-sig-tag.sig-top-divergence {
    background: rgba(255, 152, 0, 0.18);
    color: var(--color-warning);
}
.fund-sig-tag.sig-bottom-divergence {
    background: rgba(102, 126, 234, 0.18);
    color: var(--color-primary);
}

/* 量化因子数据已合并到 holdings-metrics-card 统一指标卡片中，不再使用独立面板 */

/* ===== 市场概览页面（同花顺风格） ===== */
.market-page {
    padding: 10px 12px 16px;
}
.mkt-section {
    margin-bottom: 18px;
}
.mkt-section:last-child {
    margin-bottom: 8px;
}
.mkt-section-hd {
    display: flex;
    align-items: center;
    font-size: var(--em-86);
    font-weight: 600;
    color: var(--color-text-primary, #1d1d1f);
    margin-bottom: 10px;
    padding-left: 2px;
}
.mkt-section-hd::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: var(--em-95);
    background: var(--color-primary, #007aff);
    border-radius: 2px;
    margin-right: 7px;
}
/* 指数卡片：3列紧凑网格，涨跌用浅色背景 */
.mkt-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mkt-idx {
    border-radius: var(--radius-md, 12px);
    padding: 10px 6px 8px;
    text-align: center;
    background: var(--color-surface, #fff);
    overflow: hidden;
}
.mkt-idx.up {
    background: rgba(255, 59, 48, 0.08);
}
.mkt-idx.down {
    background: rgba(52, 199, 89, 0.08);
}
.mkt-idx-name {
    font-size: var(--em-75);
    color: var(--color-text-secondary, #515154);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-east-asian: full-width;
}
.mkt-idx-price {
    font-size: var(--em-100);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
    line-height: 1.15;
}
.mkt-idx.up .mkt-idx-price {
    color: var(--color-up, #ff3b30);
}
.mkt-idx.down .mkt-idx-price {
    color: var(--color-down, #34c759);
}
.mkt-idx-chg {
    font-size: var(--em-78);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
    line-height: 1.2;
}
.mkt-idx.up .mkt-idx-chg {
    color: var(--color-up, #ff3b30);
}
.mkt-idx.down .mkt-idx-chg {
    color: var(--color-down, #34c759);
}
.mkt-idx-chg .diff {
    font-weight: 400;
    font-size: var(--em-70);
    margin-left: 3px;
}
.mkt-idx-extra {
    font-size: var(--em-62);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.mkt-idx-extra span {
    display: block;
}
.mkt-idx-extra .rise {
    font-style: normal;
    color: var(--color-up, #ff3b30);
    font-weight: 600;
}
.mkt-idx-extra .fall {
    font-style: normal;
    color: var(--color-down, #34c759);
    font-weight: 600;
}
/* 资金流向：列表式（同花顺风格） */
.mkt-list {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}
.mkt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}
.mkt-row:last-child {
    border-bottom: none;
}
.mkt-row-label {
    font-size: var(--em-90);
    color: var(--color-text-primary, #1d1d1f);
    font-weight: 500;
    font-variant-east-asian: full-width;
}
.mkt-row-sub {
    font-size: var(--em-70);
    color: var(--color-text-tertiary);
    margin-left: 6px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.mkt-row-val {
    font-size: var(--em-95);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mkt-row.up .mkt-row-val {
    color: var(--color-up, #ff3b30);
}
.mkt-row.down .mkt-row-val {
    color: var(--color-down, #34c759);
}
/* 全球指数分区：按类别分组，每组有小标题 + 3列网格 */
.mkt-global {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mkt-global-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mkt-group-title {
    font-size: var(--em-75);
    font-weight: 600;
    color: var(--color-text-secondary, #515154);
    padding-left: 2px;
    margin-bottom: 2px;
    font-variant-east-asian: full-width;
}
.mkt-global-group .mkt-grid3 {
    gap: 6px;
}

/* ===== 上拉加载更多组件 InfiniteScroll ===== */
.is-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 0;
    font-size: var(--fs-caption, 11px);
    color: #6b7280;
}
/* .is-loader 是 InfiniteScroll append 到容器末尾的最后一个子元素，
   父容器（如 .container）自身已有 padding-bottom: 15px，
   这里重置 padding-bottom 避免叠加导致底部间距变成 30px */
.is-loader:last-child {
    padding-bottom: 0;
}
.is-loader.is-loading .is-spinner i {
    animation: is-spin 0.8s linear infinite;
}
.is-loader.is-ended {
    color: var(--color-text-tertiary, #9ca3af);
}
.is-loader.is-ended span::before {
    content: "— ";
    color: var(--color-text-tertiary, #d1d5db);
    margin-right: 2px;
}
.is-loader.is-ended span::after {
    content: " —";
    color: var(--color-text-tertiary, #d1d5db);
    margin-left: 2px;
}

/* ===== 公共"加载更多"三态条 LoadMoreBar ===== */
.lmb-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    font-size: var(--fs-caption, 11px);
    color: #6b7280;
}
/* 同 .is-loader：作为容器末尾元素时重置 padding-bottom，避免与父容器 padding 叠加 */
.lmb-bar:last-child {
    padding-bottom: 0;
}
.lmb-bar.hidden {
    display: none;
}
.lmb-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    background: var(--color-bg-card, #fff);
    color: var(--color-text-secondary, #4b5563);
    font-size: var(--fs-caption, 11px);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.lmb-btn:active {
    background: var(--color-bg-hover, #f3f4f6);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}
.lmb-btn i {
    font-size: 13px;
}
.lmb-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
}
.lmb-loading .spin {
    animation: is-spin 0.8s linear infinite;
}
.lmb-loading i {
    font-size: 14px;
    color: #2563eb;
}
.lmb-done {
    color: var(--color-text-tertiary, #9ca3af);
}
.lmb-done::before {
    content: "— ";
    color: var(--color-text-tertiary, #d1d5db);
}
.lmb-done::after {
    content: " —";
    color: var(--color-text-tertiary, #d1d5db);
}
.is-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #2563eb;
}
.is-spinner i {
    font-size: 14px;
}
@keyframes is-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 全局"播报列表"按钮：队列非空时闪烁提示，不变蓝 */
.tts-global-btn.has-queue {
    color: inherit;
}
.tts-global-btn.has-queue i {
    animation: tts-pulse 1.6s ease-in-out infinite;
}

/* ============================================================
   详情页播报下拉菜单（点击播报按钮弹出"播正文/播 AI 总结"）
   - 白底玻璃风格，与项目风格统一
   - 绝对定位在按钮下方，右对齐
   ============================================================ */
.tts-play-dropdown {
    position: relative;
    display: inline-flex;
}
.tts-play-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 150px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: tts-menu-pop 0.16s ease-out;
}
.tts-play-menu.hidden {
    display: none;
}
@keyframes tts-menu-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tts-play-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-primary, #1a1a1a);
    font-size: var(--fs-subtitle, 13px);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: nowrap;
}
.tts-play-item:hover {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.tts-play-item i {
    font-size: var(--fs-body, 14px);
    color: var(--color-text-secondary, #666);
}
.tts-play-item span {
    line-height: 1;
}

/* ============================================================
   AI 总结卡片（邮件详情页 / 新闻详情页通用）
   - 与项目玻璃风格一致：白底 + 模糊 + 主色点缀
   - 嵌在正文上方，可收起
   ============================================================ */
.ai-summary-card {
    margin: var(--spacing-md) 0 var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.ai-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ai-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-subtitle, 13px);
    font-weight: 600;
    color: var(--color-primary, #3a4ba8);
}
.ai-summary-title i {
    font-size: var(--fs-subtitle, 13px);
    color: var(--color-primary, #3a4ba8);
}
.ai-summary-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary, #999);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
}
.ai-summary-close:hover {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
    color: var(--color-text-secondary, #666);
}
.ai-summary-close i {
    font-size: 14px;
}
.ai-summary-body {
    color: var(--color-text-primary, #1a1a1a);
    font-size: var(--fs-body, 14px);
    line-height: 1.6;
}
.ai-summary-item {
    position: relative;
    padding: 4px 0 4px 14px;
    color: var(--color-text-primary, #1a1a1a);
}
.ai-summary-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary, #3a4ba8);
    opacity: 0.6;
}
.ai-summary-loading,
.ai-summary-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: var(--fs-body, 14px);
    color: var(--color-text-secondary, #666);
}
.ai-summary-loading i {
    font-size: 16px;
    color: var(--color-primary, #3a4ba8);
    animation: ai-spin 1s linear infinite;
}
.ai-summary-error {
    color: #d4380d;
}
.ai-summary-error i {
    font-size: 16px;
    color: #d4380d;
}
@keyframes ai-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* 触发按钮 loading 态：保留脉冲动画，不变色（保持白色） */
#ndSummaryBtn.is-playing,
#mbSummaryBtn.is-playing {
    animation: ai-btn-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-btn-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================================
   语音播报组件 TtsPlayer（浮动迷你播放器）
   - 屏幕底部居中固定，仅在播报时显示
   - 玻璃态背景 + 黑色文字（适配所有主题）
   ============================================================ */
.tts-panel {
    position: fixed;
    left: 50%;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    /* 顶部 10px 给 drag handle，下方 8px */
    padding: 10px 10px 8px 10px;
    min-width: 300px;
    max-width: calc(100vw - 24px);
    /* 与 bottom-nav 同款白底玻璃风格，融入项目整体视觉 */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.12),
        0 2px 10px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary, #111827);
    font-size: var(--fs-caption, 11px);
    user-select: none;
    -webkit-user-select: none;
    transition:
        min-width 0.22s ease,
        padding 0.22s ease,
        gap 0.22s ease;
}
.tts-panel.dragged {
    /* 拖动后由 inline style 设置 left/top，去掉 translateX */
    transform: none;
}
.tts-panel.dragging {
    transition: none;
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.tts-panel.hidden {
    display: none;
}
/* 顶部小圆点拖动手柄（grip 风格，居中） */
.tts-drag-handle {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    flex-shrink: 0;
}
.tts-drag-handle span {
    width: 28px;
    height: 4px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
    transition: background 0.15s ease;
}
.tts-drag-handle:hover span {
    background: rgba(0, 0, 0, 0.32);
}
.tts-drag-handle:active,
.tts-panel.dragging .tts-drag-handle {
    cursor: grabbing;
}
.tts-drag-handle:active span,
.tts-panel.dragging .tts-drag-handle span {
    background: var(--color-primary, #3a4ba8);
}
/* 最小化按钮（独立小图标） */
.tts-minimize-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
}
.tts-minimize-btn i {
    font-size: 14px;
    line-height: 1;
}
/* 浮动圆形图标（最小化态）—— 与 .tts-btn-main / .float-btn-wrapper 完全一致的单层玻璃拟态 */
.tts-fab-wrapper {
    position: fixed;
    right: 20px;
    bottom: 130px; /* 在 scroll-top-wrapper (bottom: 70px) 上方 */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* 与 .tts-btn-main / .float-btn-wrapper 相同的三层 background 配方 */
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-primary-dark, #5568d3) 100%);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 24px rgba(102, 126, 234, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s;
}
.tts-fab-wrapper.hidden {
    display: none;
}
/* 内层按钮：透明覆盖层，仅承载图标和点击事件 */
.tts-fab-btn {
    position: relative;
    background: transparent;
    color: var(--color-text-on-primary);
    border: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tts-fab-btn i {
    font-size: var(--em-130);
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.tts-fab-wrapper:hover {
    transform: scale(1.1) translateY(-3px);
    background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-primary-dark, #5568d3) 100%);
    box-shadow:
        0 14px 36px rgba(102, 126, 234, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}
.tts-fab-wrapper:hover .tts-fab-btn {
    background: transparent;
}
.tts-fab-btn:active {
    transform: scale(0.92);
}
/* 播放中：图标脉冲动画 */
.tts-fab-wrapper.playing .tts-fab-btn i {
    animation: tts-fab-pulse 1.2s ease-in-out infinite;
}
@keyframes tts-fab-pulse {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
/* 单行布局：标题区 + 控制按钮 + 最小化按钮 */
.tts-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    border-radius: 10px;
    padding: 4px 6px;
    margin: -4px -6px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}
.tts-info:hover {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.04));
}
.tts-info:active {
    background: var(--color-surface-sunken, rgba(0, 0, 0, 0.06));
}
.tts-info-icon {
    font-size: 14px;
    color: var(--color-primary, #667eea);
    flex-shrink: 0;
    /* 仅在播放时才闪烁，idle 态保持稳定颜色 */
}
.tts-panel.is-playing .tts-info-icon {
    animation: tts-pulse 1.2s ease-in-out infinite;
}
@keyframes tts-pulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}
.tts-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tts-title {
    font-size: var(--fs-subtitle, 13px);
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.tts-index {
    font-size: var(--fs-mini, 10px);
    color: var(--color-text-tertiary, #9ca3af);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.tts-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    border-radius: 9px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
    padding: 0;
}
.tts-btn:hover {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.06));
    color: var(--color-text-primary, #111827);
}
.tts-btn:active {
    transform: scale(0.92);
}
.tts-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.tts-btn i {
    font-size: 15px;
    line-height: 1;
}
/* 主播放按钮：圆形 + 项目主色渐变，与右下角 FAB 视觉统一
   复刻 .float-btn-wrapper + .scroll-top-btn 的双层玻璃拟态：
   底层渐变蓝 + 上层半透明白玻璃（用 linear-gradient(rgba,rgba) 模拟纯色层，
   不会覆盖底层渐变）+ backdrop-filter 模糊 */
.tts-btn-main {
    width: 38px;
    height: 38px;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-primary-dark, #5568d3) 100%);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    color: var(--color-text-on-primary, #fff);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 4px 12px rgba(102, 126, 234, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.tts-btn-main:hover {
    /* 显式保持玻璃渐变背景，阻止 .tts-btn:hover 的浅色背景覆盖 */
    background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)), radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-primary-dark, #5568d3) 100%);
    color: var(--color-text-on-primary, #fff);
    box-shadow:
        0 6px 16px rgba(102, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.tts-btn-main:active {
    transform: scale(0.94);
}
.tts-btn-main i {
    font-size: 17px;
}

/* 触发播报的小图标按钮（嵌入到 header / 列表项内） */
.tts-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease;
    padding: 0;
}
.tts-trigger:hover {
    background: rgba(0, 0, 0, 0.06);
}
.tts-trigger:active {
    transform: scale(0.92);
}
.tts-trigger i {
    font-size: 14px;
    line-height: 1;
}
.tts-trigger.is-playing {
    /* 播放中用蓝色（项目主色），保留闪烁动画 */
    color: var(--color-primary, #2966ff);
    animation: tts-pulse 1.2s ease-in-out infinite;
}

/* ============================================================
   选择播报抽屉组件 TtsPicker（从底部滑入）
   - 全屏遮罩 + 底部抽屉
   - 列表项带勾选框，全选/清空/开始播报
   ============================================================ */
.tp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.tp-overlay.hidden {
    display: none;
}
.tp-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.22s ease;
}
.tp-overlay.visible .tp-mask {
    background: rgba(0, 0, 0, 0.45);
}
.tp-panel {
    position: relative;
    background: var(--color-surface, #ffffff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tp-overlay.visible .tp-panel {
    transform: translateY(0);
}
.tp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.tp-title {
    font-size: var(--fs-title, 15px);
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}
/* 队列抽屉工具栏：全选/清空 + 全局模式切换 */
.tp-q-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    flex-wrap: wrap;
}
.tp-q-toolbar-left,
.tp-q-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tp-mode-label {
    font-size: var(--fs-mini, 10px);
    color: var(--color-text-tertiary, #9ca3af);
}
.tp-tool-btn,
.tp-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--fs-mini, 10px);
    line-height: 1.4;
    color: var(--color-text-secondary, #4b5563);
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.tp-tool-btn i {
    font-size: 12px;
}
.tp-tool-btn:hover,
.tp-mode-btn:hover {
    background: var(--color-surface-sunken, #f3f4f6);
    color: var(--color-text-primary, #1a1a1a);
}
.tp-mode-btn.active {
    color: #fff;
    background: var(--color-primary, #3a4ba8);
    border-color: var(--color-primary, #3a4ba8);
}
.tp-tool-btn:disabled,
.tp-mode-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.tp-close,
.tp-clear {
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--fs-subtitle, 13px);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tp-close:hover,
.tp-clear:hover {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
    color: var(--color-text-primary, #111827);
}
.tp-close i {
    font-size: 18px;
}
.tp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-tint, rgba(0, 0, 0, 0.02));
}
.tp-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-subtitle, 13px);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tp-select-all .tp-check {
    margin-top: 0;
}
.tp-count {
    font-size: var(--fs-caption, 11px);
    color: var(--color-text-secondary, #6b7280);
}
.tp-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}
.tp-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: var(--fs-body, 14px);
    color: var(--color-text-tertiary, #9ca3af);
}
.tp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.12s ease;
    border-bottom: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.04));
}
.tp-row:active {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.04));
}
.tp-row.selected {
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.05));
}
.tp-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-border-strong, #d1d5db);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: all 0.15s ease;
    cursor: pointer;
}
.tp-check.checked {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-text-on-primary, #ffffff);
}
.tp-check.indeterminate {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-text-on-primary, #ffffff);
}
.tp-check i {
    font-size: 14px;
    line-height: 1;
}
/* 队列项当前播放标记 */
.tp-row-playing {
    display: inline-block;
    vertical-align: middle;
    color: var(--color-text-primary, #1a1a1a);
    font-size: 13px;
    margin-right: 4px;
    animation: tts-pulse 1.2s ease-in-out infinite;
}
.tp-text {
    flex: 1 1 auto;
    min-width: 0;
}
.tp-row-title {
    font-size: var(--fs-body, 14px);
    color: var(--color-text-primary, #111827);
    line-height: 1.45;
    margin-bottom: 2px;
    /* 2 行截断 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-row-sub {
    font-size: var(--fs-mini, 10px);
    color: var(--color-text-tertiary, #9ca3af);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* 队列抽屉里的"全文/总结"切换按钮 */
.tts-q-mode {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--fs-mini, 10px);
    line-height: 1.4;
    color: var(--color-text-tertiary, #6b7280);
    background: var(--color-surface-tint, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.tts-q-mode:hover {
    background: var(--color-surface-sunken, #f3f4f6);
    color: var(--color-text-secondary, #4b5563);
}
.tts-q-mode.active {
    color: #fff;
    background: var(--color-primary, #3a4ba8);
    border-color: var(--color-primary, #3a4ba8);
}
.tts-q-mode:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.tp-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #ffffff);
}
.tp-start {
    width: 100%;
    height: 44px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    border-radius: 10px;
    font-size: var(--fs-title, 15px);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        background 0.15s ease,
        transform 0.1s ease;
}
.tp-start:hover {
    background: #1d4ed8;
}
.tp-start:active {
    transform: scale(0.98);
}
.tp-start i {
    font-size: 16px;
}

/* 列表项内嵌的迷你播报按钮（每条新闻/邮件旁的小喇叭） */
.tts-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    border-radius: 50%;
    transition:
        background 0.15s ease,
        color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.tts-mini:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary, #1a1a1a);
}
.tts-mini:active {
    transform: scale(0.92);
}
.tts-mini i {
    font-size: 10px;
    line-height: 1;
}
.tts-mini.is-playing {
    /* 播放中用蓝色（项目主色），背景淡蓝高亮，保留闪烁动画 */
    background: rgba(41, 102, 255, 0.1);
    color: var(--color-primary, #2966ff);
    animation: tts-pulse 1.2s ease-in-out infinite;
}
.tts-mini.loading {
    /* 手动点击后正在拉取 AI 总结：图标转圈 */
    background: rgba(41, 102, 255, 0.08);
    color: var(--color-primary, #2966ff);
    pointer-events: none;
}
.tts-mini.loading i {
    animation: tts-spin 0.8s linear infinite;
}
@keyframes tts-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   主题换肤系统
   - default 主题即 :root 原始值，无需额外规则
   - 通过 document.documentElement.setAttribute("data-theme", name) 切换
   - 新增主题只需追加 [data-theme="xxx"] { ... } 覆盖变量
   ============================================================ */

/* 支付宝财富黑卡 S2 皮肤（白天浅色 + 黑金奢华装饰）
   设计理念：保持白天浅色内容区，仅在 header / 强调色 / 装饰元素
   使用黑金质感，营造财富黑卡的奢华感
   - 内容区背景保持浅色（与默认皮肤一致）
   - header 用深邃黑底 + 香槟金渐变光晕
   - 主色用金色，星标/奖牌/激活态用金色强调
   - 卡片白色背景 + 金色细描边 */
[data-theme="alipay-black-s2"] {
    /* 主色：香槟金（带金属光泽） */
    --color-primary: #b8941f;
    --color-primary-dark: #8a6f12;
    --color-primary-darker: #6b4f0a;
    --color-primary-light: #d4af37;
    --color-primary-glow: #e6c98e;
    /* header 渐变：深黑 → 暖棕 → 香槟金（黑卡奢华感） */
    --color-primary-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1408 35%, #3d2c0a 70%, #6b4f0a 100%);
    --color-primary-gradient-disabled: linear-gradient(135deg, rgba(10, 10, 10, 0.5) 0%, rgba(61, 44, 10, 0.5) 50%, rgba(107, 79, 10, 0.5) 100%);

    /* 背景与表面（保持白天浅色，仅微微偏暖） */
    --color-bg: #faf8f3;
    --color-surface: #ffffff;
    --color-surface-alt: #fdfcf8;
    --color-surface-sunken: #f4f1e8;
    --color-segment-bg: #f3efe2;
    --color-surface-tint: #fbf6e8;

    /* 文字（深棕黑系，配合金色调） */
    --color-text-primary: #2a241a;
    --color-text-secondary: #6b5d3e;
    --color-text-tertiary: #9c8b65;
    --color-text-faint: #b5a684;
    --color-text-quaternary: #c4b894;
    --color-text-placeholder: #b8a880;
    --color-text-disabled: #d4c9a8;
    --color-text-on-primary: #ffe65c;

    /* 边框与分隔线（带微妙金色调） */
    --color-border: #e8dfc5;
    --color-border-input: #d9cb9c;
    --color-border-light: #f0e8d0;
    --color-border-lighter: #f7f0dc;

    /* 语义色（保留默认即可，金色背景下也可读） */
    --color-up: #ff3b30;
    --color-down: #34c759;
    --color-up-dark: #c62828;
    --color-down-dark: #388e3c;
    --color-warning: #ff9800;
    --color-warning-dark: #e65100;
    --color-info: #1976d2;

    /* 标签色对（保留默认浅色背景，文字略偏金棕） */
    --tag-blue-bg: #eef2ff;
    --tag-blue-text: #1976d2;
    --tag-green-bg: #e8f5e9;
    --tag-green-text: #388e3c;
    --tag-red-bg: #ffebee;
    --tag-red-text: #ff3b30;
    --tag-orange-bg: #fff3e0;
    --tag-orange-text: #ff9800;
    --tag-pink-bg: #fce4ec;
    --tag-pink-text: #c2185b;
    --tag-purple-bg: #f0f3ff;
    --tag-purple-text: #8a6f12;
    --tag-gold-bg: #fff8d6;
    --tag-gold-text: #8a6f12;
    --tag-cyan-bg: #e0f7fa;
    --tag-cyan-text: #0097a7;

    /* 金色（黑卡皮肤里金色更亮，星标更突出） */
    --color-gold: #d4af37;
    --color-gold-light: #ffe65c;
    --color-gold-gradient: linear-gradient(180deg, #ffe65c 0%, #d4af37 100%);

    /* 奖牌渐变（黑卡皮肤：金属光泽更强） */
    --medal-gold: linear-gradient(135deg, #ffe65c, #d4af37);
    --medal-silver: linear-gradient(135deg, #e0e0e0, #9a9a9a);
    --medal-bronze: linear-gradient(135deg, #cd7f32, #8a4f1c);

    /* 前三名排名背景（黑卡：浅金/银/铜光晕） */
    --rank-top1-bg: linear-gradient(135deg, #fff8d6 0%, #fff3e0 100%);
    --rank-top2-bg: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    --rank-top3-bg: linear-gradient(135deg, #fff8f0 0%, #fff3e6 100%);

    /* header 玻璃态（黑卡：黑色 header 上的半透明白 + 金色描边） */
    --glass-bg: rgba(255, 255, 255, 0.16);
    --glass-bg-faint: rgba(255, 255, 255, 0.12);
    --glass-bg-hover: rgba(255, 215, 0, 0.22);
    --glass-bg-active: rgba(255, 215, 0, 0.3);
    --glass-bg-strong: rgba(255, 255, 255, 0.95);
    --glass-bg-solid: rgba(255, 255, 255, 0.98);
    --glass-bg-disabled: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 215, 0, 0.32);
    --glass-border-strong: rgba(255, 215, 0, 0.5);
    --glass-text: rgba(255, 230, 92, 0.95);
    --glass-text-secondary: rgba(255, 230, 92, 0.75);
    --glass-text-tertiary: rgba(255, 255, 255, 0.6);
    --glass-text-disabled: rgba(255, 255, 255, 0.45);

    /* 底部导航（黑卡：白色毛玻璃 + 金色激活态） */
    --nav-bg: rgba(255, 252, 240, 0.96);
    --nav-text: #b5a684;
    --nav-glow: rgba(212, 175, 55, 0.1);

    /* loading */
    --color-loading-border: #f0e8d0;

    /* 主题卡片选中态的金色光晕（覆盖默认蓝紫光晕） */
    --theme-card-active-glow: rgba(212, 175, 55, 0.28);

    /* 滑块/选中态玻璃质感：黑金主题专用（半透明金 + 强模糊 + 金色高光描边）
       在 header 黑金渐变上让金色光晕透出，营造黑卡奢华感 */
    --glass-slider-bg: rgba(255, 230, 92, 0.32);
    --glass-slider-bg-hover: rgba(255, 230, 92, 0.42);
    --glass-slider-border: rgba(255, 215, 0, 0.5);
    --glass-slider-highlight: rgba(255, 230, 92, 0.7);
    --glass-slider-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(212, 175, 55, 0.4);
}

/* 黑卡皮肤：header 用黑曜石深邃背景 + 金色光晕 + 金属描边 */
[data-theme="alipay-black-s2"] .header {
    background: radial-gradient(ellipse at 15% 0%, rgba(255, 215, 0, 0.28) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(212, 175, 55, 0.5) 0%, transparent 55%), linear-gradient(135deg, #050614 0%, #1a1408 35%, #2a1f0a 60%, #3d2c0a 85%, #5a4210 100%);
    box-shadow:
        0 6px 28px rgba(58, 47, 10, 0.32),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 215, 0, 0.25);
}

/* 黑卡皮肤：header h1 装饰条用金色光晕渐变（替代默认金色） */
[data-theme="alipay-black-s2"] .header h1::before {
    background: linear-gradient(180deg, #ffe65c 0%, #d4af37 50%, #8a6f12 100%);
    box-shadow:
        0 0 12px rgba(255, 215, 0, 0.7),
        0 0 4px rgba(255, 215, 0, 0.5);
}

/* 黑卡皮肤：底部导航白色毛玻璃 + 金色激活态光晕 */
[data-theme="alipay-black-s2"] .bottom-nav {
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.1) 0%, transparent 70%), rgba(255, 252, 240, 0.96);
    box-shadow:
        0 -1px 0 rgba(212, 175, 55, 0.18),
        0 -4px 12px rgba(0, 0, 0, 0.04);
}

/* 黑卡皮肤：菜单图标背景用浅金色调 + 金色图标 */
[data-theme="alipay-black-s2"] .more-menu-icon {
    background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.06) 70%), var(--color-surface-tint);
    color: var(--color-primary-dark);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.22);
}

/* 黑卡皮肤：header 内 active 按钮文字用浅金（在金色玻璃滑块上更亮、有奢华感） */
[data-theme="alipay-black-s2"] .header .mode-btn.active,
[data-theme="alipay-black-s2"] .header .tab.active {
    color: var(--color-primary-glow); /* #e6c98e 浅金 */
}

/* 黑卡皮肤：recent chip 改用金色调，与黑金主题协调（默认蓝紫色与黑金风格冲突） */
[data-theme="alipay-black-s2"] .sector-suggestion-chip.recent,
[data-theme="alipay-black-s2"] .sector-suggestion-chip.recent:active {
    background: var(--tag-gold-bg);
    color: var(--tag-gold-text);
    border-color: rgba(212, 175, 55, 0.3);
}

/* 黑卡皮肤：扫描进度条和百分比改用金色 */
[data-theme="alipay-black-s2"] .scan-progress-pct {
    color: var(--color-primary);
}
[data-theme="alipay-black-s2"] .scan-progress-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-glow));
}

/* ============================================================
   主题换肤弹窗（theme.js 渲染）
   复用 scan-modal 的弹窗范式：mask + card + 弹簧动画
   ============================================================ */
.theme-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.theme-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}

.theme-modal-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.theme-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.theme-modal-title {
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.theme-modal-close {
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.theme-modal-close:active {
    background: var(--color-surface-sunken);
}

.theme-modal-body {
    padding: 14px 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.theme-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

/* 单个主题卡片：左侧色块预览 + 右侧文字 + 右侧选中态 */
.theme-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-md);
    background: var(--color-surface-alt);
    border: 1.5px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.12s ease;
    font: inherit;
    text-align: left;
    width: 100%;
}
.theme-card:active {
    background: var(--color-surface-sunken);
    transform: scale(0.985);
}
.theme-card.active {
    border-color: var(--color-primary);
    background: var(--color-surface-tint);
    box-shadow:
        0 0 0 1px var(--color-primary),
        0 4px 14px var(--theme-card-active-glow, rgba(102, 126, 234, 0.22));
}

/* 主题预览色块：左侧 64×64 圆角缩略图，内嵌主色 + 强调色 + 图标
   尺寸略放大，让黑曜石质感渐变能看清 */
.theme-card-swatch {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 -8px 16px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.18);
}
.theme-card-accent {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow:
        0 0 8px currentColor,
        0 0 2px rgba(0, 0, 0, 0.4);
}
.theme-card-icon {
    color: rgba(255, 255, 255, 0.92);
    font-size: 26px;
    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(255, 255, 255, 0.18);
}

.theme-card-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.theme-card-name {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}
.theme-card-desc {
    font-size: var(--fs-13);
    color: var(--color-text-tertiary);
    line-height: 1.4;
}

/* 选中态对勾：默认隐藏，.active 时显示 */
.theme-card-check {
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
    opacity: 0;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
    transform: scale(0.6);
}
.theme-card.active .theme-card-check {
    opacity: 1;
    transform: scale(1);
}

/* VIP 专属主题锁定态（普通用户可见但不可用） */
.theme-card-locked {
    opacity: 0.62;
    cursor: not-allowed;
}
.theme-card-locked:hover {
    transform: none;
}
.theme-card-lock {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    color: #ffe65c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.theme-card-vip-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #5a4210;
    background: linear-gradient(135deg, #ffe65c, #d4af37);
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.6;
}

.theme-modal-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    font-size: var(--fs-12);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}
.theme-modal-tip i {
    font-size: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   限额监控页（fund-limit.js 渲染）
   复用 mode-toggle / stockhot 等卡片样式
   ============================================================ */
.fund-limit-container {
    padding-bottom: var(--spacing-md);
}
/* header 右侧滑块容器：保持默认宽度，不占满剩余空间 */
.fund-limit-header-right {
    margin-left: 10px;
}
/* 标题不允许被挤压 */
.page-fund-limit .header h1 {
    flex-shrink: 0;
}
.fund-limit-header-right .fund-limit-tabs {
    margin-bottom: 0;
}

/* ============================================================
   免责声明模态框（more 页面 #disclaimerBtn 触发）
   结构仿 theme-modal 但更宽，适配长文本阅读
   ============================================================ */
.disclaimer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}
.disclaimer-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sector-fade-in 0.2s ease;
}
.disclaimer-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 65vh;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    animation: sector-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}
.disclaimer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.disclaimer-title {
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}
.disclaimer-close {
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.disclaimer-close:active {
    background: var(--color-surface-sunken);
}
.disclaimer-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: var(--fs-sm, 0.875rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.disclaimer-body h3 {
    font-size: var(--fs-15, 0.9375rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 18px 0 8px;
    padding-left: 8px;
    border-left: 3px solid var(--color-primary, #667eea);
}
.disclaimer-body h3:first-of-type {
    margin-top: 6px;
}
.disclaimer-body p {
    margin: 0 0 10px;
    word-break: break-word;
}
.disclaimer-body p strong {
    color: var(--color-text-primary);
    font-weight: 600;
}
.disclaimer-lead {
    padding: 10px 12px;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-sm, 0.8125rem);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 14px;
}
/* 限额监控滑块：横向滚动，默认露出约 2 个滑块，padding/字号/高度保持默认（参照 sn-channels） */
.fund-limit-header-right .fund-limit-tabs {
    max-width: 132px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
}
.fund-limit-header-right .fund-limit-tabs::-webkit-scrollbar {
    display: none;
}
.fund-limit-header-right .fund-limit-tabs .mode-btn {
    flex-shrink: 0;
}
.fund-limit-tabs {
    margin-bottom: var(--spacing-md);
}
.fund-limit-summary {
    margin-bottom: var(--spacing-md);
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.fund-limit-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: var(--em-86);
}
.fund-limit-stat {
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fund-limit-stat i {
    font-size: 14px;
}
.fund-limit-stat.opened {
    color: var(--color-up);
}
.fund-limit-stat.increased {
    color: var(--color-primary);
}
.fund-limit-stat.limited {
    color: var(--color-text-primary);
}
.fund-limit-scan {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-size: var(--em-75);
}
.fund-limit-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.fund-limit-item {
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    cursor: pointer;
    transition:
        background 0.12s,
        transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fund-limit-item:active {
    background: var(--color-surface-sunken);
    transform: scale(0.995);
}
.fund-limit-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.fund-limit-name {
    font-size: var(--em-100);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fund-limit-code {
    font-size: var(--em-75);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fund-limit-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: var(--em-65);
    font-weight: 500;
    flex-shrink: 0;
}
.fund-limit-badge.opened {
    background: rgba(245, 67, 54, 0.1);
    color: var(--color-up);
}
.fund-limit-badge.increased {
    background: rgba(102, 126, 234, 0.12);
    color: var(--color-primary);
}
.fund-limit-badge.limited {
    background: rgba(250, 173, 20, 0.15);
    color: #d48806;
}
.fund-limit-badge.warn {
    background: rgba(245, 67, 54, 0.1);
    color: var(--color-down);
}
.fund-limit-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: var(--em-86);
}
.fund-limit-change {
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fund-limit-change i {
    font-size: 12px;
    color: var(--color-text-tertiary);
}
.limit-from {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.2);
}
.limit-to.up {
    color: var(--color-up);
    font-weight: 500;
}
.limit-to.opened {
    color: var(--color-up);
    font-weight: 500;
}
.limit-to.limited {
    color: #d48806;
    font-weight: 500;
}
.fund-limit-time {
    color: var(--color-text-tertiary);
    font-size: var(--em-75);
    flex-shrink: 0;
}
.fund-limit-row3 {
    display: flex;
    gap: 12px;
    font-size: var(--em-75);
    color: var(--color-text-tertiary);
}
.fund-limit-ftype {
    color: var(--color-primary-dark);
}
.fund-limit-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--em-86);
}
.fund-limit-container .io-btn i.spinning {
    animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* ===== Phase 5：准确率追踪面板 ===== */
.quant-acc-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 15px;
    background: var(--color-card-bg, rgba(255, 255, 255, 0.94));
    border-radius: var(--radius-md, 12px);
    margin-bottom: 12px;
}
.quant-acc-filter {
    display: flex;
    gap: 3px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.05));
    border-radius: 999px;
    padding: 3px;
}
.quant-acc-filter .quant-filter-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary, #888);
    font-size: var(--fs-13, 13px);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.quant-acc-filter .quant-filter-btn.active {
    background: var(--color-card-bg, #fff);
    color: var(--color-text-primary, #333);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.quant-acc-actions {
    display: flex;
    gap: 8px;
}
.quant-acc-scan-btn,
.quant-acc-verify-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: var(--radius-sm, 8px);
    border: none;
    font-size: var(--fs-13, 13px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.quant-acc-scan-btn {
    background: rgba(102, 126, 234, 0.1);
    color: var(--color-primary, #667eea);
    font-weight: 600;
}
.quant-acc-scan-btn:active {
    background: rgba(102, 126, 234, 0.18);
}
.quant-acc-verify-btn {
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.04));
    color: var(--color-text-secondary, #666);
}
.quant-acc-verify-btn:active {
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.08));
}
.quant-acc-scan-btn:disabled,
.quant-acc-verify-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.quant-acc-scan-btn .spin,
.quant-acc-verify-btn .spin {
    animation: acc-spin 0.8s linear infinite;
}
@keyframes acc-spin {
    to {
        transform: rotate(360deg);
    }
}
.quant-acc-overall,
.quant-acc-by-type,
.quant-acc-recent,
.quant-acc-by-date {
    padding: 15px;
    background: var(--color-card-bg, rgba(255, 255, 255, 0.94));
    border-radius: var(--radius-md, 12px);
    margin-bottom: 12px;
}
.acc-section-title {
    font-size: var(--fs-14, 14px);
    font-weight: 600;
    color: var(--color-text-primary, #333);
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 3px solid var(--color-primary, #667eea);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* 整体准确率 - 头部条 + 指标看板 */
.acc-overall-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.acc-overall-header .acc-section-title {
    margin-bottom: 0;
}
.acc-overall-badge {
    font-size: var(--fs-11, 11px);
    color: var(--color-text-tertiary, #999);
    padding: 4px 10px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.04));
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.acc-overall-badge em {
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary, #667eea);
    margin: 0 1px;
}
.acc-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.acc-stat-card {
    padding: 12px 10px 10px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.03));
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}
.acc-stat-card.good {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.02));
    border-color: rgba(76, 175, 80, 0.22);
}
.acc-stat-card.mid {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 152, 0, 0.02));
    border-color: rgba(255, 152, 0, 0.22);
}
.acc-stat-card.bad {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.02));
    border-color: rgba(244, 67, 54, 0.22);
}
.acc-stat-card .acc-label {
    font-size: var(--fs-11, 11px);
    color: var(--color-text-tertiary, #999);
    text-align: center;
    letter-spacing: 0.2px;
}
.acc-stat-card .acc-val {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-primary, #333);
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
}
.acc-stat-card .acc-val em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-tertiary, #999);
    margin-left: 1px;
}
.acc-stat-card.good .acc-val {
    color: #2e7d32;
}
.acc-stat-card.mid .acc-val {
    color: #ef6c00;
}
.acc-stat-card.bad .acc-val {
    color: #c62828;
}
.acc-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin: 2px 0 1px;
}
.acc-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}
.acc-stat-card.good .acc-bar span {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
}
.acc-stat-card.mid .acc-bar span {
    background: linear-gradient(90deg, #ff9800, #ffa726);
}
.acc-stat-card.bad .acc-bar span {
    background: linear-gradient(90deg, #f44336, #ef5350);
}
.acc-stat-card .acc-sub {
    font-size: var(--fs-11, 11px);
    color: var(--color-text-tertiary, #999);
    text-align: center;
}
.acc-stat-card .acc-sub em {
    font-style: normal;
    font-weight: 700;
    color: var(--color-text-secondary, #666);
    margin: 0 1px;
}
.acc-type-table {
    width: 100%;
    font-size: 12px;
}
.acc-type-row {
    display: grid;
    grid-template-columns: 1.5fr 0.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
    gap: 4px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    align-items: center;
}
.acc-type-row:last-child {
    border-bottom: none;
}
.acc-type-head {
    font-weight: 600;
    color: var(--color-text-tertiary, #999);
    font-size: 11px;
}
.acc-type-name {
    color: var(--color-text-primary, #333);
}
.acc-samples {
    color: var(--color-text-tertiary, #999);
    font-size: 11px;
    text-align: right;
}
.acc-type-row .good {
    color: #4caf50;
    font-weight: 600;
}
.acc-type-row .mid {
    color: #ff9800;
    font-weight: 600;
}
.acc-type-row .bad {
    color: #f44336;
    font-weight: 600;
}
.acc-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acc-recent-item {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.03));
    cursor: pointer;
    transition: background 0.2s;
}
.acc-recent-item:active {
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.08));
}
.acc-recent-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.acc-recent-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #333);
}
.acc-recent-name em {
    font-size: 11px;
    color: var(--color-text-tertiary, #999);
    font-weight: normal;
    margin-left: 4px;
}
.acc-recent-date {
    font-size: 11px;
    color: var(--color-text-tertiary, #999);
}
.acc-recent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--color-text-secondary, #666);
}
.acc-recent-meta .up {
    color: #f44336;
}
.acc-recent-meta .down {
    color: #4caf50;
}
.acc-recent-meta em {
    font-style: normal;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 3px;
}
.acc-correct {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}
.acc-wrong {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}
.acc-pending {
    background: rgba(158, 158, 158, 0.15);
    color: #999;
}
.acc-date-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.acc-date-item {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.03));
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}
.acc-date {
    font-weight: 600;
    color: var(--color-text-primary, #333);
}
.acc-date-count em {
    font-style: normal;
    font-weight: 600;
    margin: 0 3px;
}
.acc-date-count .up {
    color: #f44336;
}
.acc-date-count .down {
    color: #4caf50;
}
@media (max-width: 480px) {
    .acc-type-row {
        grid-template-columns: 1.2fr 0.5fr 0.7fr 0.7fr 0.7fr 0.6fr;
        font-size: 11px;
    }
    .acc-recent-meta {
        gap: 6px;
    }
}

/* ============================================================
   注册登录页面（auth.js）+ 用户中心（profile.js）
   - 玻璃态卡片，与项目统一风格
   - Tab 切换登录/注册
   - 输入框带图标 + 密码可显示/隐藏
   - 头像选择 + 性别单选 + 免责声明勾选
   ============================================================ */

/* —— 登录/注册/忘记密码全局弹框 —— */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    animation: auth-modal-fade-in 0.2s ease;
}
@keyframes auth-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.auth-modal-box {
    width: 100%;
    max-width: 420px;
    max-height: min(560px, 65vh);
    background: var(--color-bg, #fff);
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: auth-modal-slide-up 0.25s ease;
    overflow: hidden;
}
@keyframes auth-modal-slide-up {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px 12px;
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}
.auth-modal-header .auth-tabs {
    flex: 1;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
}
.auth-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}
.auth-modal-close i {
    font-size: 20px;
}
.auth-modal-close:hover {
    background: var(--color-primary-bg, rgba(0, 0, 0, 0.05));
    color: var(--color-text-primary);
}
.auth-modal-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* ===== VIP 开通支付弹框 ===== */
.vip-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    animation: vip-modal-fade-in 0.2s ease;
}
@keyframes vip-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.vip-modal-box {
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    background: var(--color-bg, #fff);
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: vip-modal-slide-up 0.25s ease;
    overflow: hidden;
}
@keyframes vip-modal-slide-up {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.vip-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px 12px;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
}
.vip-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vip-modal-title i {
    font-size: 20px;
    color: var(--color-gold, #d4af37);
}
.vip-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}
.vip-modal-close i {
    font-size: 20px;
}
.vip-modal-close:hover {
    background: var(--color-primary-bg, rgba(0, 0, 0, 0.05));
    color: var(--color-text-primary);
}
.vip-modal-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.vip-modal-message {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-gold, #d4af37) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-gold, #d4af37) 20%, transparent);
}
.vip-modal-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
/* 推荐套餐高亮样式（4 套餐 2x2 网格，年卡不横跨，靠徽章+边框区分） */
.vip-modal-plan-highlight {
    border-color: color-mix(in srgb, var(--color-gold, #d4af37) 50%, transparent);
    background: color-mix(in srgb, var(--color-gold, #d4af37) 8%, transparent);
}
.vip-modal-plan-highlight.selected {
    border-color: var(--color-gold, #d4af37);
    background: color-mix(in srgb, var(--color-gold, #d4af37) 12%, transparent);
}
.vip-modal-plan {
    position: relative;
    padding: 14px 10px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border, #eee);
    background: var(--color-card-bg, #fff);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    display: block;
}
.vip-modal-plan input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.vip-modal-plan.selected {
    border-color: var(--color-gold, #d4af37);
    background: color-mix(in srgb, var(--color-gold, #d4af37) 5%, transparent);
}
.vip-modal-plan-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--color-gold, #d4af37);
    padding: 1px 6px;
    border-radius: 999px;
}
.vip-modal-plan-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.vip-modal-plan-price {
    margin: 6px 0 2px;
}
.vip-modal-plan-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.vip-modal-plan-unit {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-left: 2px;
}
.vip-modal-plan-days {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.vip-modal-plan-desc {
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1.4;
}
.vip-modal-pay-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1677ff, #0958d9);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.vip-modal-pay-btn i {
    font-size: 20px;
}
.vip-modal-pay-btn:hover:not(:disabled) {
    opacity: 0.9;
}
.vip-modal-pay-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}
.vip-modal-pay-btn:disabled i {
    animation: vip-modal-spin 0.9s linear infinite;
}
@keyframes vip-modal-spin {
    to {
        transform: rotate(360deg);
    }
}
.vip-modal-service {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.vip-modal-service i {
    font-size: 14px;
}
.vip-modal-service-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text-secondary);
}
/* 轻量级 toast */
.vip-modal-toast {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s,
        transform 0.25s;
    max-width: 80vw;
    text-align: center;
}
.vip-modal-toast.vip-modal-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.auth-page,
.profile-page {
    min-height: calc(100vh - 120px);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 480px;
    margin: 0 auto;
}

/* —— 已登录视图 —— */
.auth-logged-in {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
/* hidden 必须覆盖 display:flex，否则未登录时已登录视图仍显示 */
.auth-logged-in.hidden,
.auth-tabs-view.hidden {
    display: none !important;
}
.auth-user-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0 var(--spacing-sm);
}
.auth-user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border-light);
    background: var(--color-surface-sunken);
    flex-shrink: 0;
}
.auth-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.auth-user-nickname {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.auth-user-username {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.auth-user-email {
    font-size: 12px;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* —— Tab 切换 —— */
.auth-tabs-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-segment-bg);
    border-radius: 10px;
}
.auth-tab {
    flex: 1;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.auth-tab.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* 登录表单内部子 tab（密码登录 / 验证码登录） */
.auth-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.06));
    margin-bottom: 4px;
}
.auth-subtab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary, #999);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.18s ease;
}
.auth-subtab::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: transparent;
    border-radius: 1px;
    transition: background 0.18s ease;
}
.auth-subtab.active {
    color: var(--color-text-primary);
    font-weight: 600;
}
.auth-subtab.active::after {
    background: var(--color-primary, #1677ff);
}

/* —— 表单 —— */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.auth-form.hidden {
    display: none;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* hidden 类在 auth-field 上必须生效（覆盖 display:flex） */
.auth-field.hidden {
    display: none !important;
}
.auth-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding-left: 2px;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-input);
    border-radius: 10px;
    transition: all 0.16s ease;
}
.auth-input-wrap:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}
.auth-input-wrap > i:first-child {
    padding-left: 12px;
    color: var(--color-text-tertiary);
    font-size: 16px;
    flex-shrink: 0;
}
.auth-input-wrap input[type="text"],
.auth-input-wrap input[type="email"],
.auth-input-wrap input[type="password"] {
    flex: 1;
    padding: 11px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 15px;
    outline: none;
    min-width: 0;
}
.auth-input-wrap input::placeholder {
    color: var(--color-text-placeholder);
    font-size: 14px;
}
.auth-pwd-toggle {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.auth-pwd-toggle:active {
    color: var(--color-primary);
}

/* —— 字段错误态（前端校验） —— */
.auth-field .auth-field-error {
    font-size: 12px;
    color: var(--color-up);
    line-height: 1.4;
    min-height: 0;
    padding: 0 2px;
    display: none;
}
.auth-field.has-error .auth-field-error {
    display: block;
}
.auth-field.has-error .auth-input-wrap {
    border-color: var(--color-up);
    background: color-mix(in srgb, var(--color-up) 6%, var(--color-surface-alt));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-up) 10%, transparent);
}
.auth-field.has-error .auth-input-wrap:focus-within {
    border-color: var(--color-up);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-up) 14%, transparent);
}
.auth-field.has-error .auth-input-wrap > i:first-child {
    color: var(--color-up);
}
.auth-field.has-error .auth-gender-group {
    border-color: var(--color-up);
}
.auth-modal-box .auth-field {
    gap: 3px;
}
.auth-modal-box .auth-field .auth-field-error {
    font-size: 11px;
}

/* —— 验证码输入框 + 发送按钮（同行） —— */
.auth-input-with-btn {
    padding-right: 4px;
    display: flex;
    align-items: stretch;
    min-height: 44px;
}
.auth-input-with-btn .auth-send-code-btn {
    flex-shrink: 0;
    margin: 4px 0;
    padding: 0 12px;
    min-width: 96px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid var(--color-border-input);
    background: transparent;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.16s ease;
    border-radius: 0 8px 8px 0;
    -webkit-tap-highlight-color: transparent;
}
.auth-input-with-btn .auth-send-code-btn:hover:not(:disabled) {
    background: var(--color-surface-tint);
}
.auth-input-with-btn .auth-send-code-btn:disabled {
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* —— QQ 号输入框 + @qq.com 后缀（同行） —— */
.auth-input-with-suffix {
    padding-right: 0;
}
.auth-input-with-suffix .auth-input-suffix {
    flex-shrink: 0;
    padding: 0 14px;
    border-left: 1px solid var(--color-border-input);
    color: var(--color-text-tertiary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--color-surface-sunken, rgba(0, 0, 0, 0.03));
    border-radius: 0 8px 8px 0;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
}

/* —— 头像选择 —— */
.auth-avatar-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.auth-avatar-preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    border: 2px dashed var(--color-border-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    font-size: 32px;
    overflow: hidden;
    transition: all 0.16s ease;
}
.auth-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.auth-avatar-btn {
    padding: 7px 16px;
    border: 1px solid var(--color-border-input);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.auth-avatar-btn:active {
    background: var(--color-surface-tint);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* —— 性别选择 —— */
.auth-gender-group {
    display: flex;
    gap: 8px;
}
.auth-gender-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-input);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.16s ease;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.auth-gender-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.auth-gender-item i {
    font-size: 16px;
}
.auth-gender-item:has(input:checked) {
    background: var(--color-surface-tint);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* —— 免责声明勾选 —— */
.auth-disclaimer-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
}
.auth-disclaimer-row input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.auth-disclaimer-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.auth-disclaimer-text a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

/* —— 按钮 —— */
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
    line-height: 1;
}
.auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.auth-btn-primary {
    background: var(--color-primary-gradient);
    color: var(--color-text-on-primary);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.24);
}
.auth-btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.2);
}
.auth-btn-ghost {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-input);
}
.auth-btn-ghost:active {
    background: var(--color-surface-sunken);
}
.auth-btn-loading {
    position: relative;
}
.auth-btn-loading > i {
    animation: auth-btn-spin 0.8s linear infinite;
}
@keyframes auth-btn-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.auth-submit {
    margin-top: 4px;
    padding: 13px 16px;
    font-size: 16px;
}

/* —— 提示信息 —— */
.auth-tip {
    min-height: 18px;
    font-size: 13px;
    color: var(--color-text-tertiary);
    text-align: center;
    line-height: 1.4;
}
.auth-tip-error {
    color: var(--color-up);
}
.auth-tip-success {
    color: var(--color-down);
}

/* —— 免责声明弹框 —— */
.auth-disclaimer-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-disclaimer-modal.hidden {
    display: none;
}
.auth-disclaimer-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.auth-disclaimer-content {
    position: relative;
    width: calc(100% - 32px);
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    animation: auth-modal-pop 0.2s ease-out;
}
@keyframes auth-modal-pop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.auth-disclaimer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-light);
}
.auth-disclaimer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.auth-disclaimer-close {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
}
.auth-disclaimer-close:active {
    background: var(--color-surface-sunken);
}
.auth-disclaimer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    word-break: break-word;
}
.auth-disclaimer-body h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 18px 0 8px;
    padding-left: 8px;
    border-left: 3px solid var(--color-primary, #667eea);
}
.auth-disclaimer-body h3:first-of-type {
    margin-top: 6px;
}
.auth-disclaimer-body p {
    margin: 0 0 10px;
    word-break: break-word;
}
.auth-disclaimer-body p strong {
    color: var(--color-text-primary);
    font-weight: 600;
}
.auth-disclaimer-body .disclaimer-lead {
    padding: 10px 12px;
    background: var(--color-surface-sunken);
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 14px;
}
.auth-disclaimer-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: flex-end;
}
.auth-disclaimer-foot .auth-btn {
    min-width: 120px;
}

/* —— 登录/注册/忘记密码弹框紧凑化（不影响 profile 个人中心） —— */
.auth-modal-box {
    max-width: 380px;
    max-height: min(520px, 70vh);
    border-radius: 16px;
}
.auth-modal-header {
    padding: 12px 12px 10px;
}
.auth-modal-header .auth-tab {
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 7px;
}
.auth-modal-close {
    width: 28px;
    height: 28px;
}
.auth-modal-close i {
    font-size: 18px;
}
.auth-modal-body {
    padding: 12px;
}
.auth-modal-box .auth-form {
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
}
.auth-modal-box .auth-field {
    gap: 4px;
}
.auth-modal-box .auth-label {
    font-size: 12px;
    padding-left: 1px;
}
.auth-modal-box .auth-input-wrap {
    border-radius: 8px;
    min-height: 40px;
}
/* modal 内验证码输入框（带按钮）统一高度，避免比密码框高 */
.auth-modal-box .auth-input-with-btn {
    min-height: 40px;
    padding-right: 3px;
}
.auth-modal-box .auth-input-wrap > i:first-child {
    padding-left: 10px;
    font-size: 15px;
}
.auth-modal-box .auth-input-wrap input[type="text"],
.auth-modal-box .auth-input-wrap input[type="email"],
.auth-modal-box .auth-input-wrap input[type="password"] {
    padding: 9px 10px;
    font-size: 14px;
}
.auth-modal-box .auth-input-wrap input::placeholder {
    font-size: 13px;
}
.auth-modal-box .auth-pwd-toggle {
    padding: 6px 10px;
    font-size: 15px;
}
.auth-modal-box .auth-input-with-btn .auth-send-code-btn {
    margin: 3px 0;
    padding: 6px 10px;
    font-size: 12px;
}
.auth-modal-box .auth-input-with-suffix .auth-input-suffix {
    padding: 0 12px;
    font-size: 13px;
}
.auth-modal-box .auth-avatar-field {
    gap: 7px;
    padding: 4px 0;
}
.auth-modal-box .auth-avatar-preview {
    width: 72px;
    height: 72px;
    font-size: 28px;
}
.auth-modal-box .auth-avatar-btn {
    padding: 5px 13px;
    font-size: 12px;
    border-radius: 7px;
    gap: 4px;
}
.auth-modal-box .auth-gender-group {
    gap: 6px;
}
.auth-modal-box .auth-gender-item {
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 13px;
    gap: 4px;
}
.auth-modal-box .auth-gender-item i {
    font-size: 15px;
}
.auth-modal-box .auth-disclaimer-row {
    gap: 6px;
    padding: 2px 0;
}
.auth-modal-box .auth-disclaimer-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 1px;
}
.auth-modal-box .auth-disclaimer-text {
    font-size: 12px;
    line-height: 1.45;
}
.auth-modal-box .auth-btn {
    padding: 9px 14px;
    font-size: 14px;
    border-radius: 8px;
    gap: 5px;
}
.auth-modal-box .auth-submit {
    margin-top: 2px;
    padding: 10px 14px;
    font-size: 15px;
}
.auth-modal-box .auth-tip {
    font-size: 12px;
    min-height: 16px;
}

/* —— 头像裁剪弹窗（AvatarCropper 公共组件） —— */
.ac-cropper-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ac-cropper-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ac-cropper-card {
    position: relative;
    width: calc(100% - 32px);
    max-width: 420px;
    background: var(--color-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: ac-pop 0.2s ease-out;
}
@keyframes ac-pop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.ac-cropper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-light);
}
.ac-cropper-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.ac-cropper-close {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
}
.ac-cropper-close:active {
    background: var(--color-surface-sunken);
}
.ac-cropper-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    touch-action: none;
    overflow: hidden;
}
.ac-cropper-canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.ac-cropper-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    border-radius: 10px;
    pointer-events: none;
    white-space: nowrap;
}
.ac-cropper-tools {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px 0;
}
.ac-tool-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border-input);
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s ease;
}
.ac-tool-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface-tint);
}
.ac-tool-btn:active {
    transform: scale(0.94);
}
.ac-cropper-foot {
    display: flex;
    gap: 10px;
    padding: 14px 16px 16px;
}
.ac-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
    line-height: 1;
}
.ac-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ac-btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.ac-btn-primary:active {
    transform: scale(0.98);
}
.ac-btn-ghost {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-input);
}
.ac-btn-ghost:active {
    background: var(--color-surface-sunken);
}

/* —— 用户中心页面 —— */
.profile-card {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.profile-info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
/* 头部卡片顶部装饰条：渐变光带，呼应会员体系视觉 */
.profile-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary-gradient);
    opacity: 0.85;
}
.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-surface);
    background: var(--color-surface-sunken);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.profile-avatar-edit {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
    background: var(--color-primary-gradient);
    color: var(--color-text-on-primary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-nickname-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.profile-nickname {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.profile-nickname-edit {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.profile-nickname-edit i {
    font-size: 15px;
}
.profile-nickname-edit:hover {
    background: var(--color-primary-bg, rgba(0, 0, 0, 0.05));
    color: var(--color-primary);
}
.profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.profile-gender-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
    border-radius: 999px;
    font-size: 12px;
}
.profile-email {
    font-size: 12px;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-stats-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    min-height: 24px;
}
.profile-stat-label {
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.profile-stat-label i {
    color: var(--color-text-tertiary);
    font-size: 15px;
}
.profile-stat-value {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* 会员到期下方的续费行：可点击，带箭头与点击反馈 */
.profile-renew-row {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.profile-renew-row:active {
    opacity: 0.6;
}
.profile-renew-row .profile-stat-label i {
    color: var(--color-text-tertiary);
}
.profile-renew-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-primary);
}
.profile-renew-btn i {
    font-size: 16px;
    color: var(--color-text-tertiary);
}
.profile-superadmin-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    background: var(--color-gold-gradient);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(212, 175, 55, 0.4);
}
.profile-normal-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
    border-radius: 999px;
    font-size: 12px;
}
.profile-vip-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #4a3500;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(255, 170, 0, 0.4);
}

/* —— 会员等级标签 —— */
.profile-level-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.profile-level-tag i {
    font-size: 12px;
}
/* 超管满级：与 .profile-superadmin-tag 一致（金渐变白字） */
.profile-level-super {
    background: var(--color-gold-gradient);
    color: #fff;
    box-shadow: 0 1px 4px rgba(212, 175, 55, 0.4);
}
/* 普通 VIP：与 .profile-vip-tag 一致（金橙渐变深字） */
.profile-level-vip {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #4a3500;
    box-shadow: 0 1px 4px rgba(255, 170, 0, 0.4);
}
/* 未开通：与 .profile-normal-tag 一致（蓝底蓝字） */
.profile-level-normal {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* —— 修改昵称弹窗 —— */
.nickname-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: nickname-modal-fade-in 0.2s ease;
}
@keyframes nickname-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.nickname-modal {
    background: var(--color-card-bg, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: nickname-modal-slide-up 0.25s ease;
}
@keyframes nickname-modal-slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.nickname-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}
.nickname-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.nickname-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.nickname-modal-close i {
    font-size: 18px;
}
.nickname-modal-close:hover {
    background: var(--color-primary-bg, rgba(0, 0, 0, 0.05));
    color: var(--color-text-primary);
}
.nickname-modal-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nickname-modal-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: 10px;
    font-size: 15px;
    color: var(--color-text-primary);
    background: var(--color-input-bg, #fff);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.nickname-modal-input:focus {
    border-color: var(--color-primary);
}
.nickname-modal-tip {
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.5;
}
.nickname-modal-error {
    font-size: 12px;
    color: #e53935;
    min-height: 16px;
    line-height: 1.4;
}
.nickname-modal-footer {
    display: flex;
    gap: 10px;
    padding: 0 15px 15px;
    justify-content: flex-end;
}
.nickname-modal-footer .auth-btn {
    min-width: 88px;
    height: 38px;
    font-size: 14px;
}

/* —— 卡片标题（账号信息 / 账号设置） —— */
.profile-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}
.profile-card-title i {
    font-size: 15px;
}

/* —— 账号设置卡片 —— */
.profile-settings-card {
    padding: 12px 12px 4px;
}
.profile-settings-card .profile-card-title {
    margin: 4px 4px 8px;
}
/* 列表式设置项（复用 more-menu 风格） */
.profile-setting-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease;
}
.profile-setting-item + .profile-setting-item {
    border-top: 1px solid var(--color-border-light);
    border-radius: 0;
}
.profile-setting-item:first-of-type {
    border-radius: 10px 10px 0 0;
}
.profile-setting-item:last-of-type {
    border-radius: 0 0 10px 10px;
}
.profile-setting-item:active {
    background: var(--color-surface-sunken);
}
.profile-setting-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-surface-tint);
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
}
.profile-setting-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.profile-setting-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}
.profile-setting-desc {
    font-size: 12px;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-setting-arrow {
    font-size: 16px;
    color: var(--color-text-quaternary);
    flex-shrink: 0;
}
/* 非按钮型设置项（如带开关的行），去除按钮交互样式 */
.profile-setting-item-no-btn {
    cursor: default;
}
.profile-setting-item-no-btn:active {
    background: transparent;
}

/* —— 邮件订阅开关（iOS 风格 switch） —— */
.profile-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}
.profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
}
.profile-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--color-border-input, #d1d5db);
    border-radius: 999px;
    transition: background 0.22s ease;
}
.profile-switch-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.22s ease;
}
/* 默认主题：开启态用绿色（iOS 风格） */
.profile-switch input:checked + .profile-switch-slider {
    background: var(--color-up, #18a058);
}
.profile-switch input:checked + .profile-switch-slider::before {
    transform: translateX(18px);
}
.profile-switch input:disabled + .profile-switch-slider {
    opacity: 0.6;
    cursor: not-allowed;
}
/* 黑金主题：开启态改用香槟金，关闭态用主题感知边框色，圆点带金色阴影 */
[data-theme="alipay-black-s2"] .profile-switch-slider {
    background: var(--color-border-input, #d9cb9c);
}
[data-theme="alipay-black-s2"] .profile-switch input:checked + .profile-switch-slider {
    background: linear-gradient(135deg, var(--color-gold-light, #ffe65c) 0%, var(--color-gold, #d4af37) 100%);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.18),
        0 0 6px rgba(212, 175, 55, 0.35);
}
[data-theme="alipay-black-s2"] .profile-switch-slider::before {
    box-shadow:
        0 1px 3px rgba(58, 47, 10, 0.32),
        0 0 0 0.5px rgba(212, 175, 55, 0.3);
}

/* —— 测试账号工具卡片 —— */
.profile-test-card {
    padding: 12px 12px 14px;
    border: 1px dashed color-mix(in srgb, var(--color-primary, #18a058) 35%, transparent);
}
.profile-test-card .profile-card-title {
    color: var(--color-primary);
}
.profile-test-desc {
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    margin: 4px 4px 10px;
}
.profile-test-actions {
    display: flex;
    gap: 10px;
    padding: 0 4px;
}
.profile-test-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        opacity 0.16s ease;
}
.profile-test-btn i {
    font-size: 15px;
}
.profile-test-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.profile-test-grant {
    color: var(--color-up, #18a058);
    background: color-mix(in srgb, var(--color-up, #18a058) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-up, #18a058) 30%, transparent);
}
.profile-test-grant:active {
    background: color-mix(in srgb, var(--color-up, #18a058) 16%, transparent);
}
.profile-test-cancel {
    color: var(--color-down, #e74c3c);
    background: color-mix(in srgb, var(--color-down, #e74c3c) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-down, #e74c3c) 30%, transparent);
}
.profile-test-cancel:active {
    background: color-mix(in srgb, var(--color-down, #e74c3c) 16%, transparent);
}
.profile-test-pay {
    width: 100%;
    color: #1677ff;
    background: color-mix(in srgb, #1677ff 8%, transparent);
    border-color: color-mix(in srgb, #1677ff 30%, transparent);
}
.profile-test-pay:active {
    background: color-mix(in srgb, #1677ff 16%, transparent);
}

/* —— 退出登录按钮 —— */
.profile-logout-btn {
    color: var(--color-down, #e74c3c);
    border: 1px solid color-mix(in srgb, var(--color-down, #e74c3c) 25%, transparent);
    background: color-mix(in srgb, var(--color-down, #e74c3c) 6%, transparent);
}
.profile-logout-btn:active {
    background: color-mix(in srgb, var(--color-down, #e74c3c) 12%, transparent);
}

/* —— 性别选择器 —— */
.profile-gender-picker {
    display: flex;
    gap: 10px;
}
.profile-gender-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 15px 8px;
    border: 1.5px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    background: var(--color-input-bg, #fff);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.profile-gender-option i {
    font-size: 24px;
}
.profile-gender-option:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}
.profile-gender-option.active {
    border-color: var(--color-primary);
    background: var(--color-primary-bg, rgba(0, 0, 0, 0.03));
    color: var(--color-primary);
    font-weight: 600;
}

/* —— 黑金主题适配 —— */
[data-theme="alipay-black-s2"] .auth-logged-in,
[data-theme="alipay-black-s2"] .auth-form,
[data-theme="alipay-black-s2"] .profile-card {
    background: rgba(255, 252, 240, 0.94);
}
[data-theme="alipay-black-s2"] .auth-btn-primary {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.32);
}
[data-theme="alipay-black-s2"] .auth-superadmin-tag {
    box-shadow: 0 1px 6px rgba(212, 175, 55, 0.5);
}

/* ============================================================
   邀请好友页面（invite.js 渲染）
   - 与项目一致的玻璃风格卡片
   - 英雄卡 + 邀请链接卡 + 邀请明细列表
   ============================================================ */
.invite-page {
    padding-top: 15px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.invite-hero-card,
.invite-link-card,
.invite-list-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 15px;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.invite-hero-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}
.invite-hero-title i {
    font-size: 18px;
    color: #f59e0b;
}
.invite-hero-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
}
.invite-stats-row {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    background: var(--color-surface-tint);
    border-radius: 12px;
    margin-bottom: 12px;
}
.invite-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.invite-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.invite-stat-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
}
.invite-stat-divider {
    width: 1px;
    height: 30px;
    background: var(--color-border-light);
}
.invite-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.invite-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}
.invite-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), #f59e0b);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.invite-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.invite-link-title,
.invite-list-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}
.invite-link-title i,
.invite-list-title i {
    font-size: 16px;
    color: var(--color-primary);
}
.invite-link-box {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
}
.invite-link-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    color: var(--color-text-secondary);
    outline: none;
    user-select: all;
    font-family: inherit;
}
.invite-link-input:focus {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}
.invite-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform 0.1s ease,
        filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.invite-copy-btn:active {
    transform: scale(0.97);
    filter: brightness(0.92);
}
.invite-link-tip {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-tertiary);
}
.invite-link-tip i {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-text-quaternary);
}
.invite-list-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-tertiary);
}
.invite-list {
    display: flex;
    flex-direction: column;
}
.invite-list-loader {
    padding: 20px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-tertiary);
}
.invite-list-loader i {
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 4px;
    color: var(--color-primary);
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.invite-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px dashed var(--color-border-light);
}
.invite-list-item:last-child {
    border-bottom: none;
}
.invite-item-idx {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-surface-tint);
    color: var(--color-text-tertiary);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.invite-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface-tint);
    color: var(--color-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.invite-item-info {
    flex: 1;
    min-width: 0;
}
.invite-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invite-item-sub {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invite-item-bonus {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.06));
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    flex-shrink: 0;
}
.invite-item-bonus i {
    font-size: 13px;
}
.invite-item-time {
    font-size: 11px;
    color: var(--color-text-quaternary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 手机端：时间与 bonus 换行堆叠 */
@media (max-width: 420px) {
    .invite-item-time {
        display: none;
    }
    .invite-link-box {
        flex-direction: column;
    }
    .invite-copy-btn {
        padding: 10px 14px;
        justify-content: center;
    }
}

/* 黑金主题适配：邀请页 */
[data-theme="alipay-black-s2"] .invite-hero-card,
[data-theme="alipay-black-s2"] .invite-link-card,
[data-theme="alipay-black-s2"] .invite-list-card {
    background: rgba(255, 252, 240, 0.95);
    border-color: rgba(212, 175, 55, 0.22);
}
[data-theme="alipay-black-s2"] .invite-progress-fill {
    background: linear-gradient(90deg, #d4af37, #f1c971);
}
[data-theme="alipay-black-s2"] .invite-copy-btn {
    background: linear-gradient(135deg, #d4af37, #b48820);
}
[data-theme="alipay-black-s2"] .invite-item-bonus {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.08));
    border-color: rgba(212, 175, 55, 0.35);
    color: #7a5d10;
}

/* —— 会员续期页（超级管理员专属）—— */
.member-renew-count {
    font-size: 13px;
    color: var(--color-text-tertiary);
    padding: 10px 4px 6px;
    font-variant-numeric: tabular-nums;
}

/* 用户卡片列表 */
.member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.member-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.member-card:hover {
    border-color: var(--color-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
/* 头部：头像 + 信息 + 操作 */
.member-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--color-primary);
    font-weight: 600;
}
.member-avatar i {
    font-size: 20px;
}
.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.member-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.member-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    word-break: break-all;
}
.member-test-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.6;
}
.member-email {
    font-size: 12px;
    color: var(--color-text-tertiary);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
/* 操作按钮：横排图标按钮 */
.member-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.member-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition:
        background 0.16s,
        border-color 0.16s,
        transform 0.16s;
    white-space: nowrap;
}
.member-action-btn:hover {
    transform: translateY(-1px);
}
.member-action-btn:active {
    transform: translateY(0);
}
.member-action-btn i {
    font-size: 15px;
}
.member-renew-btn {
    background: linear-gradient(135deg, rgba(61, 79, 176, 0.12), rgba(61, 79, 176, 0.05));
    color: var(--color-primary);
    border-color: rgba(61, 79, 176, 0.22);
}
.member-renew-btn:hover {
    background: linear-gradient(135deg, rgba(61, 79, 176, 0.2), rgba(61, 79, 176, 0.1));
    border-color: rgba(61, 79, 176, 0.35);
}
.member-del-btn {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.22);
    padding: 0;
    width: 32px;
}
.member-del-btn:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.4);
}
.member-reset-btn {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.22);
    padding: 0;
    width: 32px;
}
.member-reset-btn:hover {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.4);
}
/* 底部统计区：自适应换行，避免窄屏挤压 */
.member-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
}
.member-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    min-width: 0;
}
.member-stat-item i {
    font-size: 14px;
    color: var(--color-text-quaternary);
    flex-shrink: 0;
}
.member-stat-label {
    color: var(--color-text-quaternary);
    flex-shrink: 0;
}
.member-stat-value {
    color: var(--color-text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 续期预设按钮 */
.renew-preset-btn {
    flex: 1;
    min-width: calc(33% - 6px);
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.renew-preset-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.renew-preset-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

@media (max-width: 480px) {
    .member-card {
        padding: 12px;
        gap: 10px;
    }
    .member-card-head {
        flex-wrap: wrap;
        gap: 10px;
    }
    .member-avatar {
        width: 38px;
        height: 38px;
    }
    .member-avatar i {
        font-size: 18px;
    }
    .member-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .member-renew-count {
        width: 100%;
    }
}

/* ===== 开通会员页面（member-pay） ===== */
.mp-container {
    padding-bottom: 30px;
}
.mp-content {
    max-width: 640px;
    margin: 0 auto;
}
.mp-hero {
    padding: 24px 18px 18px;
    text-align: center;
}
.mp-hero-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.mp-hero-desc {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: 8px;
    line-height: 1.6;
}
.mp-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 6px 14px 14px;
}
.mp-plan {
    position: relative;
    padding: 22px 18px 18px;
    border-radius: 14px;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #eee);
    text-align: center;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}
.mp-plan:active {
    transform: scale(0.98);
}
.mp-plan-highlight {
    border-color: color-mix(in srgb, var(--color-gold, #d4af37) 55%, transparent);
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.18);
}
[data-theme="alipay-black-s2"] .mp-plan-highlight {
    border-color: var(--color-gold, #d4af37);
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.28);
}
.mp-plan-badge {
    position: absolute;
    top: 0;
    right: 14px;
    padding: 3px 10px;
    border-radius: 0 0 8px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #5a4011;
    background: linear-gradient(135deg, #ffe65c 0%, #d4af37 100%);
}
.mp-plan-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.mp-plan-price {
    margin: 10px 0 4px;
    line-height: 1;
}
.mp-plan-amount {
    font-size: 34px;
    font-weight: 800;
    color: var(--color-up, #18a058);
}
[data-theme="alipay-black-s2"] .mp-plan-amount {
    color: var(--color-gold, #d4af37);
}
.mp-plan-unit {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 3px;
}
.mp-plan-days {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.mp-plan-desc {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-bottom: 14px;
    line-height: 1.5;
    min-height: 18px;
}
.mp-plan-btn {
    width: 100%;
    padding: 10px 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #f0b952 0%, #d4af37 100%);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.28);
    cursor: pointer;
    transition:
        transform 0.12s ease,
        opacity 0.12s ease;
}
.mp-plan-btn:active {
    transform: scale(0.97);
}
.mp-plan-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
[data-theme="alipay-black-s2"] .mp-plan-btn {
    background: linear-gradient(135deg, var(--color-gold-light, #ffe65c) 0%, var(--color-gold, #d4af37) 100%);
}
.mp-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 15px 18px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-up, #18a058) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-up, #18a058) 20%, transparent);
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.mp-notice i {
    font-size: 15px;
    color: var(--color-up, #18a058);
    flex-shrink: 0;
    margin-top: 1px;
}

/* 支付结果卡片 */
.mp-result {
    margin: 0 15px 18px;
}
.mp-result-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px solid var(--color-border, #eee);
    background: var(--color-card-bg, #fff);
}
.mp-result-success {
    border-color: color-mix(in srgb, var(--color-up, #18a058) 35%, transparent);
    background: color-mix(in srgb, var(--color-up, #18a058) 5%, transparent);
}
.mp-result-pending {
    border-color: color-mix(in srgb, var(--color-gold, #d4af37) 35%, transparent);
    background: color-mix(in srgb, var(--color-gold, #d4af37) 6%, transparent);
}
.mp-result-timeout {
    border-color: color-mix(in srgb, var(--color-text-tertiary, #999) 30%, transparent);
    background: color-mix(in srgb, var(--color-text-tertiary, #999) 5%, transparent);
}
.mp-result-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.mp-result-success .mp-result-icon {
    color: var(--color-up, #18a058);
}
.mp-result-pending .mp-result-icon i {
    animation: mp-spin 0.9s linear infinite;
    color: var(--color-gold, #d4af37);
}
.mp-result-timeout .mp-result-icon {
    color: var(--color-text-tertiary, #999);
}
@keyframes mp-spin {
    to {
        transform: rotate(360deg);
    }
}
.mp-result-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.mp-result-desc {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 3px;
    line-height: 1.5;
}

/* 我的订单列表 */
.mp-orders-section {
    margin: 0 15px;
}
.mp-orders-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 4px 0 10px;
}
.mp-orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mp-orders-loading,
.mp-orders-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 13px;
}
.mp-orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mp-orders-empty i {
    font-size: 32px;
    opacity: 0.5;
}
.mp-orders-empty.mp-orders-error i {
    color: var(--color-down, #e74c3c);
    opacity: 0.7;
}
.mp-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #eee);
}
.mp-order-left {
    flex: 1;
    min-width: 0;
}
.mp-order-subject {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-order-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-quaternary);
}
.mp-order-no {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}
.mp-order-right {
    text-align: right;
    flex-shrink: 0;
}
.mp-order-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.mp-order-status {
    font-size: 11px;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-block;
}
.mp-order-status-pending {
    color: var(--color-text-tertiary);
    background: color-mix(in srgb, var(--color-text-tertiary, #999) 12%, transparent);
}
.mp-order-status-paid {
    color: var(--color-up, #18a058);
    background: color-mix(in srgb, var(--color-up, #18a058) 12%, transparent);
}
.mp-order-status-closed,
.mp-order-status-refunded {
    color: var(--color-down, #e74c3c);
    background: color-mix(in srgb, var(--color-down, #e74c3c) 10%, transparent);
}
/* pending 订单的"验证支付"按钮 */
.mp-order-verify-btn {
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-up, #18a058) 40%, transparent);
    background: color-mix(in srgb, var(--color-up, #18a058) 8%, transparent);
    color: var(--color-up, #18a058);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.mp-order-verify-btn i {
    font-size: 12px;
}
.mp-order-verify-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-up, #18a058) 16%, transparent);
    border-color: var(--color-up, #18a058);
}
.mp-order-verify-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}
.mp-order-verify-btn:disabled i {
    animation: mp-spin 0.9s linear infinite;
}
/* 轻量级 toast 提示 */
.mp-toast {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s,
        transform 0.25s;
    max-width: 80vw;
    text-align: center;
}
.mp-toast.mp-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}