/* ==================== 全局设计变量 ====================
   全站统一金融视觉系统的统一入口：颜色、圆角、阴影全部从这里取值，
   禁止各页面/组件各写一套不同的蓝/绿/红/边框/阴影/圆角。
   首页保留区域（.featured-*、.market-card 系列、.sidebar 系列）继续使用自己原有的局部颜色，
   不强行替换成这里的变量，只有全站共用组件（导航栏/弹窗/按钮/输入框/标签页等）以及
   我的预测、市场详情、predictions 等页面的卡片/标签/按钮/表单使用这些变量。 */

:root {
  --page-bg: #F5F7FB;
  --surface: #FFFFFF;
  --surface-muted: #F8FAFC;
  --border: #E5EAF2;
  --divider: #EEF1F5;

  --text-primary: #111827;
  --text-number: #172033;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --brand: #2563EB;
  --brand-hover: #1D4ED8;
  --brand-active: #1E40AF;
  --brand-soft: #EFF6FF;

  --profit: #16A34A;
  --profit-soft: #ECFDF3;
  --loss: #DC2626;
  --loss-soft: #FEF2F2;
  --warning: #D97706;

  --yes-text: #15803D;
  --yes-bg: #ECFDF3;
  --yes-border: #BBF7D0;
  --no-text: #DC2626;
  --no-bg: #FEF2F2;
  --no-border: #FECACA;

  --badge-count: #EF4444;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 6px 18px rgba(37, 99, 235, 0.08);
  /* 2026-09 v0 风格视觉优化新增：大面板/弹窗级别的轻阴影，用于本轮新增的
     .auth-card 等"重要卡片"，不影响任何已经在用 --shadow-card/--shadow-hover 的地方 */
  --shadow-elevated: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);

  /* 市场详情页弹窗统一视觉系统专用变量（只在弹窗相关规则里使用，不改上面任何一个
     既有变量的值，不影响首页/我的预测/predictions 页面已经在用这些既有变量的地方） */
  --modal-overlay-bg: rgba(15, 23, 42, 0.30);
  --modal-surface-border: #E2E8F0;
  --modal-radius: 16px;
  --modal-shadow: 0 18px 50px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.10);
  --modal-card-border: #E5E7EB;
  --modal-card-radius: 12px;
  --modal-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  --modal-card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.10);

  /* 第一阶段 App Shell：全站手机版基础 Design Tokens。取值全部反推自已经验证满意的
     手机版首页 / 市场详情页现状（不是凭空新定一套），本轮新写的手机版 CSS
     （热门市场/我的预测/预测市场三个页面）优先引用这几个变量，不再各自写死数字；
     首页/市场详情页已有规则本身不强制迁移，避免无必要地触碰已经满意的代码 */
  --mobile-page-padding: 1rem;
  --mobile-card-radius: 0.75rem;
  --mobile-control-height: 44px;
  --mobile-bottom-nav-h: 58px;
  --mobile-sheet-radius: 1rem;
  --mobile-section-gap: 1.25rem;

  /* ASFO Mobile UI Design Tokens（2026-09）：v0「我」页面已验证通过的手机版设计语言，
     只在手机版 @media(max-width:768px) 里、按页面 body class 逐页引用，不替换上面任何
     一个既有全局变量、不影响桌面端任何样式。逐页迁移，见各页面自己的 body.page-* 覆盖规则。 */
  --asfo-mobile-bg: #f4f5f7;
  --asfo-mobile-blue: #3b5bff;
  --asfo-mobile-card: #ffffff;
  --asfo-mobile-border: rgba(229, 229, 229, .8);
  --asfo-mobile-divider: #f5f5f5;
  --asfo-mobile-radius: 16px;
  --asfo-mobile-page-padding: 16px;
  --asfo-mobile-gap: 12px;
  --asfo-mobile-text: #171717;
  --asfo-mobile-muted: #a3a3a3;
}

/* ==================== 全局样式 ==================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

/* 统一 focus 视觉：禁止浏览器默认黑色粗边框，全站可交互元素改用品牌蓝描边，
   不影响可访问性（键盘 tab 导航时依然有清晰的可见焦点） */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    border-color: var(--brand);
}

/* 搜索输入框本身不画焦点框：外层容器（.navbar-search / .mobile-search-bar / .category-search-box）
   已有圆角边框和 focus 高亮，上面全站 input:focus-visible 的 box-shadow 会在里面多出一圈四方形内框 */
.search-input,
.search-input:focus,
.search-input:focus-visible,
.mobile-search-bar-input,
.mobile-search-bar-input:focus,
.mobile-search-bar-input:focus-visible,
.category-search-input,
.category-search-input:focus,
.category-search-input:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

body {
    width: 100%;
    min-height: 100%;
    /* 顶部固定要求 body 不设置 overflow-x（哪怕是 hidden），
       否则 body 会变成一个新的滚动容器，导致其内部子元素的 position: sticky 失效。
       横向溢出的防护交给上面 html 的 overflow-x: hidden 统一处理，两者效果一致，不影响原有防溢出行为 */
    overflow-y: visible;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--page-bg);
    color: var(--text-primary);
    line-height: 1.6;
}

/* ==================== 顶部固定区域 ====================
   导航栏 + 分类栏（页面有的话）作为一个整体吸顶，而不是各自独立 sticky 再手动猜一个像素/rem 偏移量——
   后者在移动端 .navbar-container 换成纵向堆叠、导航栏变高时会导致分类栏的固定偏移量算错，
   两行互相重叠或露出空隙。改成外层一个共同容器 sticky，两行永远按正常文档流叠在一起，
   不需要在这里维护任何"导航栏高度"的猜测值 */

.site-top-fixed {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
}

/* ==================== 顶部导航栏 ==================== */

.navbar {
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.navbar-logo h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
}

.navbar-search {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.search-input {
    flex: 1;
    /* min-width:0 是纯防御性修复：搜索框位置/宽度/样式/功能完全不变（.navbar-search 自身的
       min-width:200px/max-width:400px 没有改），只是这个 flex 子项本身默认的 min-width:auto
       会用输入框的内容最小尺寸兜底——在组合资金/可用余额金额位数变多、把 .navbar-right
       顶宽、搜索框被压缩到接近 200px 下限的极端情况下，没有这一行会导致右侧放大镜按钮被
       挤出搜索框、进而撑出 Header 横向滚动条；加上这一行后搜索框外观/交互没有任何变化，
       只是不再在这种极端情况下把按钮挤出去 */
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    padding: 0.5rem;
    font-size: 0.875rem;
    color: #1a1a1a;
}

.search-input::placeholder {
    color: #999;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #666;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover {
    color: #2563eb;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* ==================== 顶部导航右侧：持仓金额 / 我的预测 / 余额金额 / 充值 / 预测市场 ====================
   全站统一入口（首页/详情页/我的预测/predictions 共用同一套 class 和顺序）：
   [ 持仓金额框 ][ 我的预测 ]  [ 余额金额框 ][ 充值 ]  [ 预测市场 ]
   金额框本身是纯展示 <div>，不是链接也不是按钮，不绑定任何跳转/弹窗事件。 */

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-amount-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 150px;
    padding: 0 14px;
    border-radius: 8px;
    background-color: #F8FAFC;
    border: 1px solid #D8E2F0;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    user-select: none;
    box-sizing: border-box;
}

.header-amount-symbol {
    color: #64748B;
    margin-right: 1px;
}

.header-amount-number {
    color: #172033;
}

/* 拆分自原来的单个 .header-amount-number（现在渲染成整数+小数两个 span，见 ui.js
   renderHeaderMoney），默认颜色和拆分前完全一致，字号继续跟随 .header-amount-box
   本身，桌面端/其它页面视觉上和拆分前没有任何区别；手机版首页资金卡片会在自己的
   media query 里单独覆盖这两个 class 的字号/颜色，做整数大、小数小的效果 */
.header-amount-integer,
.header-amount-decimal {
    color: #172033;
}

/* "可用余额"手机版首页专用替换文案"我的余额"：默认（桌面端/其它页面）隐藏，
   只在 body.page-home 的手机端媒体查询里显示，见下方 body.page-home 相关规则 */
.header-asset-label-mobile-text {
    display: none;
}

/* 手机窄屏下默认显示的短标签（"持仓"/"余额"），桌面端始终隐藏；
   桌面端/展开态显示完整 $ 金额，见下方 640px 媒体查询 */
.header-amount-mobile-label {
    display: none;
}

.header-amount-full {
    display: inline-flex;
    align-items: center;
}

.header-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: all 0.18s ease;
}

/* 我的预测 / 预测市场：次按钮，不能比充值更醒目 */
.header-my-predictions,
.header-market-link {
    width: 100px;
    background-color: #FFFFFF;
    border-color: #CBD5E1;
    color: #172033;
}

.header-market-link {
    color: #334155;
}

.header-my-predictions:hover,
.header-market-link:hover {
    background-color: #F8FAFC;
    border-color: #93C5FD;
    color: #2563EB;
}

/* 充值：顶部最醒目的主按钮 */
.header-recharge {
    width: 90px;
    background-color: #2563EB;
    border-color: #2563EB;
    color: #FFFFFF;
}

.header-recharge:hover {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.20);
}

.header-recharge:active {
    background-color: #1E40AF;
    border-color: #1E40AF;
}

/* ==================== Header 用户头像入口 + 下拉菜单 ====================
   充值按钮右侧新增的圆形头像触发器，点击展开下拉菜单；菜单内是原"我的预测""预测市场"
   两个 <a> 元素本体（原 DOM 整体移入，href/class 不变，未新建重复跳转逻辑），未删除
   任何跳转功能。桌面/平板/手机统一生效（不依赖桌面专属的 .header-assets-bar
   display:contents 布局），此处的 !important 均只用于覆盖上面共享的
   .header-my-predictions / .header-market-link 基础按钮外观（宽度/背景/边框/悬停色），
   因为下拉菜单项仍然复用这两个类名以保留原有 href/功能标识，不影响其它页面上
   仍按原样使用这两个类的按钮外观。 ==================== */
.header-user-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
}

/* 正式账户系统 Phase 1：未注册（游客）时顶部显示的"注册"入口，视觉上和现有充值主按钮
   （.header-recharge）保持同一套品牌蓝配色/高度/圆角，不新增一套按钮样式 */
.header-register-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 1.1rem;
    border-radius: 8px;
    background-color: #2563EB;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.header-register-btn:hover {
    background-color: #1D4ED8;
}
.header-register-btn[hidden] {
    display: none;
}
@media (max-width: 768px) {
    .header-register-btn {
        height: 34px;
    }
}

.header-user-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    border-radius: 999px;
    background-color: transparent;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #334155;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.header-user-trigger svg {
    width: 20px;
    height: 20px;
}

.header-user-trigger:hover {
    background-color: rgba(15, 23, 42, 0.05);
}

.header-user-trigger.is-open {
    background-color: rgba(15, 23, 42, 0.07);
}

.header-user-status-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: #22C55E;
    border: 1.5px solid #FFFFFF;
    box-sizing: content-box;
}

.header-user-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 170px;
    max-width: calc(100vw - 32px);
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 80;
}

.header-user-dropdown.is-open {
    display: flex;
}

.header-user-dropdown-item {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    width: 100% !important;
    height: 46px !important;
    padding: 0 10px !important;
    border-radius: 8px;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #172033 !important;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}

.header-user-dropdown-item:hover {
    background-color: rgba(37, 99, 235, 0.06) !important;
    border-color: transparent !important;
    color: #172033 !important;
}

.header-user-dropdown-item .header-asset-icon-doc {
    display: inline-flex !important;
    width: 16px;
    height: 16px;
    color: #2563EB;
    flex: none;
    margin-right: 0;
}

.header-user-dropdown-item + .header-user-dropdown-item {
    margin-top: 2px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* 头像下拉菜单里的"账户资产"（组合资金/我的余额）：桌面端顶部资产栏本来就直接
   展示这两项，这里默认隐藏，只在手机版首页（body.page-home）显示，见下方
   @media (max-width: 768px) 规则；金额渲染复用 ui.js renderHeaderMoney/
   updateBalanceDisplay，不是第二套数据来源 */
.header-user-dropdown-assets {
    display: none;
}

/* ==================== 桌面端一体化白色资产信息栏（方案 B） ====================
   只在桌面端（>768px）生效：搜索框右侧原有的 [持仓金额][我的预测] [余额金额][充值] 两组
   不拆散、不复制，用 display:contents 让组内元素直接参与 .header-assets-bar 的横向排列，
   再用 order 把视觉顺序改成"组合资金 / 可用余额 / 我的预测 / 充值"。真实数据渲染
   （ui.js renderHeaderMoney 写进 .header-amount-box 的内容）、rechargeBtn 点击弹窗、
   my-predictions-link 跳转全部不变，这里只加图标/文案外壳和布局。
   768px 以下（手机端）见后面 @media (max-width: 768px) 里的还原规则。 ==================== */
@media (min-width: 769px) {
    .header-assets-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        /* 外层容器只保留布局用的 padding（保证组合资金/可用余额/我的预测/充值的横向位置
           和间距和调整前完全一致），去掉白色底板、边框、圆角胶囊轮廓和阴影，
           视觉上和 Header 原有的灰白背景自然融合，不再有一个独立的"外框" */
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 6px 14px 6px 10px;
        box-shadow: none;
        /* 自身也是 .header-actions 的一个 flex 子项，同样去掉 min-width:auto 兜底，
           避免金额位数变多时在换行判定前占用超出实际渲染尺寸的空间 */
        min-width: 0;
    }

    .header-assets-bar .header-action-group {
        display: contents;
    }

    .header-assets-bar .header-asset-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        /* flex 子项默认 min-width:auto 会用内容的最小内容尺寸兜底，金额位数变多时可能让
           外层在换行判定前就先按"没收缩过"的尺寸占位，个别宽度下出现和视觉不符的
           横向可滚动区域；显式收紧成 0，交给里面 .header-amount-box 的 white-space:nowrap
           自己决定要多宽，不再有这层多余的最小宽度兜底 */
        min-width: 0;
    }

    /* 视觉顺序：图标(组合资金) -> 文案(组合资金) -> 分隔线 -> 图标(余额) -> 文案(余额)
       -> 分隔线 -> 我的预测 -> 充值。组内元素已经因为 display:contents 变成
       .header-assets-bar 的直接排列项，用 order 精确指定先后。 */
    .header-asset-icon-portfolio { order: 1; }
    .header-asset-icon-portfolio + .header-asset-text { order: 2; }
    .header-asset-divider:first-of-type { order: 3; }
    .header-asset-icon-wallet { order: 4; }
    .header-asset-icon-wallet + .header-asset-text { order: 5; }
    .header-asset-divider:last-of-type { order: 6; }
    .header-recharge { order: 8; }

    .header-asset-icon {
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-asset-icon svg {
        width: 16px;
        height: 16px;
    }

    .header-asset-icon-portfolio {
        background-color: #1D4ED8;
    }

    .header-asset-icon-wallet {
        background-color: #059669;
    }

    .header-asset-icon-doc {
        width: 16px;
        height: 16px;
        color: #2563EB;
        margin-right: 2px;
    }

    .header-asset-label {
        font-size: 11px;
        font-weight: 600;
        color: #94A3B8;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* 金额框嵌进白色资产栏内部后，不再需要自己单独的浅灰底/边框/固定宽度，
       只保留真实数字本身的字号和颜色，数据来源和格式化逻辑完全不变 */
    .header-assets-bar .header-amount-box {
        height: auto;
        width: auto;
        min-width: 0;
        padding: 0;
        border: none;
        background: transparent;
        font-size: 14px;
        font-weight: 700;
        cursor: default;
    }

    .header-asset-divider {
        width: 1px;
        height: 26px;
        background-color: rgba(15, 23, 42, 0.07);
        flex: none;
    }

    /* 充值默认改成较轻的浅蓝底 + 蓝色文字，不再是常驻实心蓝色大按钮；
       鼠标移入时背景平滑变成现有蓝色、文字变白，尺寸和点击区域完全不变 */
    .header-assets-bar .header-recharge {
        width: auto;
        padding: 0 20px;
        height: 34px;
        border-radius: 999px;
        background-color: rgba(37, 99, 235, 0.06);
        border-color: rgba(37, 99, 235, 0.12);
        color: #2563EB;
    }

    .header-assets-bar .header-recharge:hover {
        background-color: #2563EB;
        border-color: #2563EB;
        color: #FFFFFF;
        box-shadow: none;
    }

    .header-assets-bar .header-recharge:active {
        background-color: #1D4ED8;
        border-color: #1D4ED8;
        color: #FFFFFF;
    }
}

/* 平板端（769px~1024px）压缩间距和内边距，数字本身不允许截断——只是空隙变紧凑 */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-assets-bar {
        gap: 6px;
        padding: 6px 10px 6px 8px;
    }

    .header-asset-icon {
        width: 26px;
        height: 26px;
    }

    .header-asset-label {
        font-size: 10px;
    }

    .header-assets-bar .header-amount-box {
        font-size: 13px;
    }

    .header-assets-bar .header-recharge {
        padding: 0 14px;
    }

    .header-user-dropdown {
        width: 150px;
    }
}

.menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 0.35rem;
    padding: 0.5rem;
}

.menu-toggle span {
    width: 1.5rem;
    height: 0.2rem;
    background-color: #1a1a1a;
    border-radius: 0.1rem;
    transition: all 0.3s;
}

/* ==================== 分类导航栏 ==================== */

.category-nav {
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.5rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.category-nav::-webkit-scrollbar {
    height: 0.25rem;
}

.category-nav::-webkit-scrollbar-track {
    background: transparent;
}

.category-nav::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 0.125rem;
}

.category-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.category-list {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    min-width: 100%;
}

.category-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.category-btn:hover {
    color: #2563eb;
    background-color: #f0f7ff;
}

.category-btn.active {
    color: #2563eb;
    background-color: #f0f7ff;
    border-bottom: 2px solid #2563eb;
}

/* ==================== 分类栏"更多"下拉菜单（仅首页） ==================== */
/* 这一段只影响首页：.category-nav-row / .category-scroll-area / .category-more-*
   这几个类名只出现在 index.html 里，market-detail.html / predictions.html / my-predictions.html
   的分类栏结构和样式完全不受影响 */

/* 首页分类栏原本靠 .category-nav 自身的 overflow-x:auto/overflow-y:hidden 做横向滚动，
   现在滚动责任转移给内层 .category-scroll-area，这里必须放开 .category-nav 自身的裁剪，
   否则"更多"下拉菜单会被 overflow-y:hidden 纵向裁掉一截。只在首页生效（.category-nav-has-more
   这个类只出现在 index.html），market-detail.html / predictions.html / my-predictions.html
   的分类栏不受影响，继续用 .category-nav 原有的横向滚动行为 */
.category-nav-has-more {
    overflow: visible;
}

.category-nav-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100%;
}

.category-scroll-area {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 隐藏这一层自己的横向滚动条外观（窄屏分类溢出时浏览器默认滚动条是一条粗灰色横线），
       只去掉可视样式，overflow-x:auto 本身保留，滚动功能不受影响 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-scroll-area::-webkit-scrollbar {
    display: none;
}

.category-scroll-area .category-list {
    min-width: max-content;
}

.category-more-wrap {
    position: relative;
    flex: none;
    /* .category-list 里的 .category-btn 因为父级 flex 默认 align-items:stretch 被拉伸到
       和整行一样高，"更多"在另一层（.category-nav-row 的 align-items:center）不会被拉伸，
       只按自身内容居中，导致两者盒子高度差几像素、视觉上和其它分类不在同一水平线；
       这里让 .category-more-wrap 也参与拉伸，改成同样的高度 */
    align-self: stretch;
}

.category-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.category-more-btn:hover,
.category-more-btn.is-open {
    color: #2563eb;
    background-color: #f0f7ff;
}

.category-more-arrow {
    font-size: 0.65rem;
    display: inline-block;
    transition: transform 0.15s ease;
}

.category-more-btn.is-open .category-more-arrow {
    transform: rotate(180deg);
}

.category-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    max-width: 220px;
    width: max-content;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
    display: none;
    z-index: 70;
}

.category-more-menu.is-open {
    display: block;
}

.category-more-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.category-more-item:hover {
    background-color: #f5f7fa;
}

.category-more-item.is-active {
    background-color: #eff6ff;
    color: #2563eb;
}

.category-more-item svg {
    flex: none;
    width: 16px;
    height: 16px;
}

@media (max-width: 640px) {
    .category-more-menu {
        right: 0;
        left: auto;
        min-width: 170px;
    }
}

/* ==================== 结算中 / 已结算 市场卡片（"更多"菜单专属列表 + 搜索结果） ==================== */

.market-card-archived {
    cursor: pointer;
}

.market-archived-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.market-archived-tag.is-settling {
    background: #FEF3C7;
    color: #B45309;
}

.market-archived-tag.is-settled {
    background: #E5E7EB;
    color: #374151;
}

.market-archived-result {
    font-size: 0.85rem;
    color: #374151;
    margin-bottom: 0.35rem;
}

.market-archived-result strong.is-yes {
    color: #16A34A;
}

.market-archived-result strong.is-no {
    color: #DC2626;
}

.market-archived-meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.market-archived-hint {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

/* ==================== "更多 → 已结算"纵向列表视图 ==================== */

#marketsGrid.is-list-view {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.market-settled-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.75rem 1.1rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.market-settled-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.market-settled-row-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}

.market-settled-row-thumb {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
}

.market-settled-row-info {
    min-width: 0;
    flex: 1 1 auto;
}

.market-settled-row-category {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

.market-settled-row-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    margin-bottom: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-settled-row-title:hover {
    color: #2563eb;
}

.market-settled-row-stats {
    font-size: 0.78rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-settled-row-dot {
    color: #d1d5db;
}

.market-settled-row-result {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.6rem;
}

.market-settled-row-result.is-yes {
    background: #ECFDF5;
}

.market-settled-row-result.is-no {
    background: #FEF2F2;
}

.market-settled-row-result-label {
    font-size: 0.66rem;
    color: #9ca3af;
}

.market-settled-row-result-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #374151;
    white-space: nowrap;
}

.market-settled-row-result.is-yes .market-settled-row-result-value {
    color: #16A34A;
}

.market-settled-row-result.is-no .market-settled-row-result-value {
    color: #DC2626;
}

@media (max-width: 640px) {
    .market-settled-row {
        flex-wrap: wrap;
        row-gap: 0.6rem;
    }

    .market-settled-row-left {
        width: 100%;
    }

    .market-settled-row-result {
        margin-left: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 0.35rem;
    }
}

/* ==================== 主容器 ==================== */

.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.main-content {
    display: grid;
    /* 主轮播约 72%-76%，右侧栏约 24%-28%（1400px 容器下约 354px≈26%）。
       align-items: stretch 让 .content-left 和 .sidebar 这一行天然拉伸到同一行高，
       两者顶部都从行顶开始、底部都到行底结束，不需要再靠 JS 反复对比高度；
       row-gap 单独设置（列间距 column-gap 保持不变）：Hero 底部到"全部市场"标题固定 24px，
       和下面标题→卡片、卡片行间距形成统一的 24px/20px 纵向节奏 */
    grid-template-columns: 2.8fr minmax(300px, 1fr);
    align-items: stretch;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
}

/* 非首页分类（轮播 + 右侧热门市场隐藏时）：市场列表占满主内容宽度，
   不保留右侧栏留下的空白列（由 setHomeExclusiveSectionsVisible 切换这个类） */
.main-content.is-full-width {
    grid-template-columns: 1fr;
}

.content-left {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* "全部市场"区域独立成为 .main-content 的直接子项，横跨两列，永远占满主容器整行宽度，
   不受右侧"热门市场"栏是否存在影响；首页和分类页共用同一个 #marketsGrid，
   这里只负责"这块区域该多宽"，市场卡片本身的视觉在下面 #marketsGrid 相关规则里统一处理 */
.markets-section-full {
    grid-column: 1 / -1;
}

/* 视觉节奏：标题紧贴它所描述的内容（小间距），区块之间留出明显呼吸感（大间距），
   而不是统一的等距堆叠——让页面有"标题→内容，喘一口气，标题→内容"的阅读节奏。
   .section-heading-hero 内部文字（"重点市场"/"实时精选"）已经在更早一轮全部隐藏，
   这个标题条本身不再占任何可见内容，但原来的 margin-bottom 仍然会占位、把下面的
   轮播往下顶一截，导致轮播顶部和右侧热门市场顶部对不齐，这里去掉这份多余间距 */
.section-heading-hero {
    margin-bottom: 0;
}

.section-heading-grid {
    margin-bottom: 1.25rem;
}

/* ---------- 区块标题：给每个区块一个明确的身份，而不是无标签的色块直接排在一起 ---------- */

.section-heading {
    display: flex;
    flex-direction: column;
}

.section-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
}

.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.section-heading-left {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.section-title-main {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.section-meta {
    /* "共 XXX 个"这类辅助统计文字：字号更小、颜色更浅，不和标题抢视觉重量 */
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ==================== 非首页分类页面工具栏：搜索 / 筛选 / 只看收藏 ====================
   线性图标按钮，统一高度，轻边框圆角胶囊筛选控件，不使用大面积背景色（六、视觉要求） */

.category-toolbar-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-secondary, var(--text-muted));
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    flex: none;
}

.category-toolbar-icon-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

.category-toolbar-icon-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* 筛选展开中 / 只看收藏开启时的轻微选中状态 */
.category-toolbar-icon-btn.is-active {
    background-color: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

.category-search-wrap {
    display: flex;
    align-items: center;
}

.category-search-box {
    display: flex;
    align-items: center;
    height: 2.1rem;
    margin-left: 0.4rem;
    padding: 0 0.3rem 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
}

.category-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    color: var(--text-primary);
    width: 11rem;
}

.category-search-clear-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.category-search-clear-btn:hover {
    color: var(--brand);
}

/* "取消"：只在手机版搜索栏里出现（见下面 640px 断点），桌面端保持原有两个控件
   （输入框 + 清除按钮），不新增视觉元素，桌面 1440px 下这条规则实际不可见、不占位 */
.category-search-cancel-btn {
    display: none;
    border: none;
    background: transparent;
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 0.3rem;
    flex-shrink: 0;
}

.category-filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.category-filter-pill {
    height: 2rem;
    padding: 0 1.6rem 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
}

.category-filter-pill:focus {
    outline: none;
    border-color: var(--brand);
}

.category-filter-reset-btn {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
}

.category-filter-reset-btn:hover {
    color: var(--brand);
}

/* ==================== 首页（category=hot）"全部市场"放大镜：展开动画 + 热门搜索悬浮卡片 ====================
   只在 .category-toolbar-icons.is-home-search（由 app.js setCategoryToolbarVisible 按当前分类切换）下生效，
   其它分类页的工具栏样式和交互保持原样。展开：搜索框宽度从 0 增长，同时用 clip-path 从左向右揭开；
   热门搜索卡片绝对定位浮在下方市场卡片之上，不占文档流、不把卡片往下挤，z-index 低于顶部吸顶导航（100） */

.category-toolbar-icons.is-home-search {
    position: relative;
}

.is-home-search .category-search-box {
    clip-path: inset(0 100% 0 0 round 999px);
    opacity: 0;
    transition: width 0.28s ease, padding 0.28s ease, margin 0.28s ease,
        clip-path 0.32s ease, opacity 0.2s ease;
}

.is-home-search .category-search-box.is-expanded {
    clip-path: inset(0 0 0 0 round 999px);
    opacity: 1;
}

@media (min-width: 641px) {
    .is-home-search .category-search-box {
        width: 0;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .is-home-search .category-search-box.is-expanded {
        width: 15rem;
        margin-left: 0.4rem;
        padding: 0 0.3rem 0 0.75rem;
    }

    .is-home-search .category-search-input {
        flex: 1;
        min-width: 0;
        width: auto;
    }
}

.home-hot-search-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 14px 16px 16px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    animation: homeHotSearchIn 0.2s ease;
}

.home-hot-search-card[hidden] {
    display: none;
}

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

.home-hot-search-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.home-hot-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-hot-search-tag {
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1;
    padding: 7px 12px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.home-hot-search-tag:hover,
.home-hot-search-tag:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    background-color: var(--brand-soft);
    outline: none;
}

.home-hot-search-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    /* 分类标题和三个图标始终留在同一行；搜索框展开后独占下一行、宽度撑满，不横向溢出 */
    .category-search-wrap {
        flex-wrap: wrap;
    }

    .category-search-box {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
        box-sizing: border-box;
        /* 统一 40px 高、左右 12px 内边距（输入框自身再加一点呼吸感），
           输入框/清除/取消保持同一行（display:flex 已经是这个效果，这里只调尺寸） */
        height: 40px;
        padding: 0 8px 0 12px;
        gap: 4px;
    }

    /* focus 状态作用于整个输入容器（外层圆角描边高亮），不是 input 自己的一圈小框——
       input 本身已经是 border:none，只有容器可以承载这个视觉反馈 */
    .category-search-box:focus-within {
        border-color: #9CA3AF;
        box-shadow: none;
    }

    .category-search-input {
        width: 100%;
        font-size: 14px;
    }

    .category-search-cancel-btn {
        display: inline-flex;
        align-items: center;
    }

    /* 搜索栏独占一行展开时，到下方结果网格的间距收紧到 12px（默认 .section-heading-grid
       的 20px margin-bottom 是给"标题+图标同一行"这种更高的行准备的，搜索框换行展开后
       沿用同一个间距会显得偏空）；这个 class 由 openCategorySearchBox/closeCategorySearchBox
       动态切换，只影响手机宽度，不影响桌面端 .section-heading-grid 的间距 */
    .section-heading-grid.category-search-open {
        margin-bottom: 12px;
    }

    /* ---------- 手机版首页（.is-home-search）：常驻长条搜索框 + 筛选 + 收藏 同一行 ----------
       不再显示放大镜圆形按钮、不播放展开动画；搜索框始终可见（覆盖 JS 写在行内的 display:none），
       聚焦即弹出"热门搜索"卡片（见 app.js 的 focus 监听）。卡片 left:0、right 让出两个 40px 按钮
       + 两个 8px 间距，与搜索框左右边缘精确对齐。全部中性灰，不使用蓝色描边/光圈 */
    .category-toolbar-icons.is-home-search {
        flex: 1 1 100%;
        min-width: 0;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .is-home-search #categorySearchToggleBtn,
    .is-home-search .category-search-cancel-btn {
        display: none;
    }

    .is-home-search .category-search-wrap {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .is-home-search .category-search-box,
    .is-home-search .category-search-box.is-expanded {
        display: flex !important;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0;
        height: 40px;
        padding: 0 6px 0 12px;
        gap: 8px;
        background-color: #F3F4F6;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        clip-path: none;
        opacity: 1;
        transition: background-color 0.15s, border-color 0.15s;
    }

    .is-home-search .category-search-box:focus-within {
        background-color: #ECEEF1;
        border-color: #C4C9D1;
        box-shadow: none;
    }

    .is-home-search .category-search-leading-icon {
        display: flex;
        flex: none;
        color: #6B7280;
    }

    .is-home-search .category-search-input {
        flex: 1;
        min-width: 0;
        width: auto;
        font-size: 14px;
    }

    .is-home-search .category-search-input::placeholder {
        color: #9CA3AF;
    }

    /* 没有输入内容时不显示 ×（清除/收起），有内容时才出现 */
    .is-home-search .category-search-input:placeholder-shown + .category-search-clear-btn {
        display: none;
    }

    .is-home-search .category-search-clear-btn {
        color: #9CA3AF;
    }

    .is-home-search .category-search-clear-btn:hover {
        color: #4B5563;
    }

    .is-home-search .category-toolbar-icon-btn {
        width: 40px;
        height: 40px;
        background-color: #F3F4F6;
        border-color: #E5E7EB;
        color: #4B5563;
    }

    .is-home-search .category-toolbar-icon-btn:hover {
        background-color: #E5E7EB;
        border-color: #D1D5DB;
        color: #1F2937;
    }

    .is-home-search .category-toolbar-icon-btn.is-active {
        background-color: #E5E7EB;
        border-color: #9CA3AF;
        color: #111827;
    }

    /* 键盘焦点：保留清晰可见的中性灰描边环，替换全站默认的蓝色光圈 */
    .is-home-search .category-toolbar-icon-btn:focus-visible,
    .is-home-search .category-search-clear-btn:focus-visible {
        outline: 2px solid #9CA3AF;
        outline-offset: 2px;
        box-shadow: none;
    }

    .is-home-search .home-hot-search-card {
        left: 0;
        right: calc(2 * 40px + 2 * 8px);
        width: auto;
        top: calc(100% + 6px);
    }
}

/* 搜索框左侧放大镜图标：只在手机版首页常驻搜索框里显示（见上面 .is-home-search 规则） */
.category-search-leading-icon {
    display: none;
}

.category-search-leading-icon svg {
    width: 16px;
    height: 16px;
}

/* ==================== 首页重点市场轮播（一体化重做，不再是 3 套模板拼接） ====================
   每一张轮播都是同一套统一布局：左列 = 真实图片+分类+大标题、Yes/No 结果列表、
   摘要区（成交量/流动性/热度/剩余时间）、查看按钮；右列 = 真实历史或"平台趋势"走势图，
   占满整个右半部分，不再关在小白盒子里，末端雷达脉冲持续跟随真实概率。
   结构：hero-viewport（track 横向滑动 + 左右箭头）+ hero-dots-row（独立圆点条）。
   只在分类切换/市场集合真正变化时整体重建 DOM；5 秒实时轮询只做字段级 patch，
   不重建 DOM、不重置 currentIndex、不换图片、不重画走势图。 */

.hero-carousel {
    background-color: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    /* 边框调淡成非常浅的灰色、阴影同步减弱，避免大卡片看起来像浮在页面上；
       只单独覆盖轮播这一个元素，不改 --border/--shadow-card 共享变量本身，
       不影响下方市场卡片和右侧热门市场沿用的原有边框/阴影 */
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
    border: 1px solid #EEF2F7;
    /* 和下方"全部市场"的垂直间距统一交给 .main-content 的 row-gap 控制（不再在这里
       额外叠加 margin-bottom），避免两层间距叠加导致空白过大 */
}

.hero-viewport {
    position: relative;
    overflow: hidden;
}

.hero-track {
    display: flex;
    transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-track { transition: none; }
}

.hero-slide {
    flex: 0 0 100%;
    min-width: 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    /* 轮播整体高度收紧，首屏能看到下方部分市场卡片，不做一个占满视口的大 Banner */
    min-height: 280px;
}

/* ---------- 左列：图片 + 分类 + 大标题 + 结果列表 + 摘要 + 查看按钮 ---------- */

.hero-left-col {
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.5rem;
}

.hero-head-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

/* 左上角真实市场图片：明显放大，是轮播的重要视觉元素，不是装饰小图标 */
.hero-thumb-wrap {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.hero-thumb-real,
.hero-thumb-default {
    width: 100%;
    height: 100%;
}

.hero-thumb-real {
    background-size: cover;
    background-position: center;
}

.hero-thumb-default {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cover-glyph {
    font-size: 1.9rem;
    color: #fff;
    opacity: 0.95;
}

.cat-cover-sports { background: linear-gradient(135deg, #1D4ED8 0%, #0EA5E9 100%), repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 12px, transparent 12px 24px); background-blend-mode: normal, overlay; }
.cat-cover-sports-events { background: linear-gradient(135deg, #0D9488 0%, #0891B2 100%), repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 12px, transparent 12px 24px); background-blend-mode: normal, overlay; }
.cat-cover-crypto { background: linear-gradient(135deg, #B45309 0%, #F59E0B 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px); }
.cat-cover-politics { background: linear-gradient(135deg, #3730A3 0%, #6D28D9 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 6px, transparent 6px 26px); background-blend-mode: normal, overlay; }
.cat-cover-tech { background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 22px); }
.cat-cover-finance { background: linear-gradient(135deg, #065F46 0%, #059669 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 20px); background-blend-mode: normal, overlay; }
.cat-cover-entertainment { background: linear-gradient(135deg, #9D174D 0%, #DB2777 100%), radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 55%); }
.cat-cover-default { background: linear-gradient(135deg, #475569 0%, #64748B 100%); }

.hero-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-category-line {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cat-color, var(--brand));
    margin-bottom: 0.25rem;
}

/* 标题放大，是整个轮播的第一视觉焦点 */
.hero-main-title {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 结果列表：直接展示 Yes/No 真实概率（或未来真实多结果字段），
   不再是两个大色块，纯文字行 + 分隔线，数字放大突出 ---------- */

.hero-outcomes-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.15rem;
}

.hero-outcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--divider);
}

.hero-outcome-row:last-child {
    border-bottom: none;
}

.hero-outcome-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.hero-outcome-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.hero-outcome-row.is-yes .hero-outcome-value { color: var(--yes-text); }
.hero-outcome-row.is-no .hero-outcome-value { color: var(--no-text); }

/* ---------- 左下角摘要区：成交量/流动性/市场热度/剩余时间 ---------- */

.hero-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--divider);
}

.hero-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.hero-summary-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.hero-summary-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-view-btn {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    color: white;
    background-color: var(--brand);
    cursor: pointer;
    transition: background-color 0.2s;
}

.hero-view-btn:hover {
    background-color: var(--brand-hover);
}

.hero-empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ---------- 右列：走势图占满整个轮播右半部分，一体化设计，不是独立小盒子 ---------- */

.hero-chart-col {
    position: relative;
    min-width: 0;
    padding: 1.1rem 1.5rem 1.1rem 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--divider);
}

.hero-chart-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding-left: 1.25rem;
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

.hero-chart-legend-inline {
    display: flex;
    gap: 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.hero-chart-legend-inline .is-yes { color: var(--yes-text); }
.hero-chart-legend-inline .is-no { color: var(--no-text); }
.hero-chart-legend-inline strong { font-size: 1rem; }

/* 右上角：数据来源标签 + 时间范围切换按钮 */
.hero-chart-head-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 真实数据 vs 平台趋势：视觉上必须能一眼分清，不能把视觉趋势混淆成真实成交历史 */
.hero-chart-source {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.hero-chart-source.is-real {
    background: var(--brand-soft);
    color: var(--brand);
}

.hero-chart-source.is-platform {
    background: var(--surface-muted);
    color: var(--text-muted);
    border: 1px solid var(--divider);
}

.hero-chart-range-tabs {
    display: flex;
    gap: 0.2rem;
    background: var(--surface-muted);
    border-radius: 999px;
    padding: 0.15rem;
}

.hero-range-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.hero-range-btn:hover {
    color: var(--text-secondary);
}

.hero-range-btn.is-active {
    background: var(--brand);
    color: #fff;
}

.hero-chart-plot-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    padding-left: 1.25rem;
}

.hero-chart-svg-large {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.hero-chart-line-yes {
    fill: none;
    stroke: #16A34A;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke-width 0.15s, opacity 0.15s;
}

.hero-chart-line-no {
    fill: none;
    stroke: #DC2626;
    stroke-width: 2;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
    opacity: 0.8;
    transition: stroke-width 0.15s, opacity 0.15s;
}

/* 鼠标靠近某条线时加粗高亮，另一条线降低透明度，方便对比观察 */
.hero-chart-line-yes.is-hover-active { stroke-width: 4; }
.hero-chart-line-no.is-hover-active { stroke-width: 3; opacity: 1; }
.hero-chart-line-yes.is-hover-dim { opacity: 0.35; }
.hero-chart-line-no.is-hover-dim { opacity: 0.3; }

/* ---------- Y 轴刻度：颜色刻意调淡，不抢视觉 ---------- */

.hero-chart-grid-line {
    stroke: var(--divider);
    stroke-width: 1;
}

.hero-chart-axis-label {
    font-size: 9px;
    fill: var(--text-muted);
    text-anchor: end;
    dominant-baseline: middle;
    opacity: 0.75;
}

/* ---------- 底部时间轴：24H/7D/30D/全部 对应的真实等距时间刻度 ----------
   固定高度的一行，位置和 hero-chart-plot-wrap 用同一个左内边距，保证刻度的
   百分比横坐标和上面走势图的数据点严格对齐；overflow:hidden 防止任何刻度文字
   溢出图表容器。 */

.hero-chart-xaxis {
    position: relative;
    height: 16px;
    flex: none;
    padding-left: 1.25rem;
    overflow: hidden;
}

.hero-xaxis-tick {
    position: absolute;
    top: 0;
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.8;
    white-space: nowrap;
}

.hero-xaxis-tick.is-left { transform: translateX(0); }
.hero-xaxis-tick.is-center { transform: translateX(-50%); }
.hero-xaxis-tick.is-right { transform: translateX(-100%); }

/* ---------- 十字准星 + 悬停高亮点：默认隐藏，鼠标移动到图表内才出现 ---------- */

.hero-chart-crosshair {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

.hero-chart-crosshair.is-visible {
    opacity: 0.6;
}

.hero-hover-dot {
    opacity: 0;
    stroke-width: 2;
    fill: #fff;
    pointer-events: none;
    transition: opacity 0.1s;
}

.hero-hover-dot.is-visible {
    opacity: 1;
}

.hero-hover-dot-yes { stroke: #16A34A; }
.hero-hover-dot-no { stroke: #DC2626; }

/* ---------- Tooltip：跟随鼠标，显示日期/时间 + Yes/No 概率 ---------- */

.hero-chart-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    font-size: 0.72rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.1s;
}

.hero-chart-tooltip.is-visible {
    opacity: 1;
}

.hero-tooltip-date {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.15rem;
}

.hero-tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.hero-tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    display: inline-block;
}

.hero-tooltip-dot.is-yes { background: #16A34A; }
.hero-tooltip-dot.is-no { background: #DC2626; }

@media (prefers-reduced-motion: reduce) {
    .hero-chart-crosshair,
    .hero-hover-dot,
    .hero-chart-tooltip,
    .hero-chart-line-yes,
    .hero-chart-line-no {
        transition: none;
    }
}

/* ---------- 图表首次绘制：从左向右画出（JS 设置 dasharray/dashoffset，这里只定义过渡） ---------- */

.hero-chart-draw {
    transition: none;
}

/* ---------- 末端雷达脉冲：实心点 + 循环放大淡出的圆环，只在当前可见轮播上运行 ---------- */

.hero-radar-pulse .radar-pulse-dot {
    fill: currentColor;
}

.hero-radar-pulse .radar-pulse-ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: radar-pulse-ring 2s ease-out infinite;
    animation-play-state: paused;
}

/* 非当前轮播暂停脉冲动画，只有 .is-current 这一张才真正循环播放 */
.hero-slide.is-current .hero-radar-pulse .radar-pulse-ring {
    animation-play-state: running;
}

@keyframes radar-pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-radar-pulse .radar-pulse-ring {
        animation: none;
        opacity: 0;
    }
}

/* 2026-09：电脑版首页 Hero/Banner 图表默认只显示 Yes 一条线。No 的真实数据、坐标计算、
   Tooltip 悬停时的 Yes/No 两行数值全部保持不变（JS 一个字没动，No 的数值仍然正常算出来，
   只是不在图表上画出来）——这里只隐藏 No 折线本身、悬停红点、末端呼吸脉冲、顶部图例徽标
   这几个"看得见"的元素。只在 ≥769px 生效，手机版完全不受影响，继续保持 Yes+No 两条线。 */
@media (min-width: 769px) {
    .hero-chart-line-no,
    .hero-hover-dot-no,
    .hero-radar-pulse[data-pulse="no"],
    .hero-chart-legend-inline .is-no {
        display: none;
    }
}

/* 2026-10：电脑版首页 Banner 三处展示细节（只在 ≥769px 生效，手机版首页布局完全不变）
   1) Yes 价格右侧的涨跌幅：字号/字重/颜色与市场详情页 .chart-price-change 一致，
      和 Yes 价格保持同一行；数值由 app.js computeHeroYesChange 按详情页同口径计算
   2) 市场热度只在电脑版 Banner 中隐藏（真实字段、计算逻辑和 JS 更新节点都保留）
   3) 摘要区从 4 列改为 3 列：成交量 | 流动性 | 剩余时间，均分可用宽度 */
.hero-chart-change {
    display: none;
}

@media (min-width: 769px) {
    .hero-chart-legend-inline .is-yes {
        white-space: nowrap;
    }

    .hero-chart-change {
        display: inline;
        margin-left: 0.35rem;
        font-size: 0.8rem;
        font-weight: 700;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .hero-chart-change.is-up { color: #16A34A; }
    .hero-chart-change.is-down { color: #DC2626; }
    .hero-chart-change.is-flat,
    .hero-chart-change.is-na { color: var(--text-muted, #94a3b8); }

    .hero-summary-item-heat {
        display: none;
    }

    .hero-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1rem;
    }
}

/* ---------- 轮播切换淡入：新的当前轮播的图片/走势图轻微淡入一次 ---------- */

@keyframes hero-visual-fade-in {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

.hero-slide.is-current .hero-thumb-wrap,
.hero-slide.is-current .hero-chart-col {
    animation: hero-visual-fade-in 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-current .hero-thumb-wrap,
    .hero-slide.is-current .hero-chart-col {
        animation: none;
    }
}

/* ---------- 箭头：竖排停靠在左列/走势图列的分隔缝上，纵向居中 ----------
   左列（结果列表/摘要）文字比较密，箭头如果贴在卡片左右两条真正的边缘，会直接压在
   文字上；.hero-slide 的列宽比是 1fr : 1.15fr，分隔线正好在 100/(1+1.15)=46.51% 处，
   这条缝本身就是留白（分隔线 + 两侧内边距），两个箭头竖排放在这里不会挡住任何文字或图表线。 */

/* 左箭头 + 6 个分页点 + 右箭头现在统一渲染在 #heroDotsOuter 里（卡片白色框架外面、
   底部同一行），不再叠放在卡片内部左右边缘。箭头本身只是普通的灰色半透明圆形按钮，
   不再用 position:absolute 定位，随 #heroDotsOuter 的 flex 排列自然落在圆点左右两侧 */
.hero-arrow {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(148, 163, 184, 0.22);
    box-shadow: none;
    color: #7C8798;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.hero-arrow:hover {
    background: rgba(148, 163, 184, 0.34);
}

/* ---------- 左箭头 + 圆点 + 右箭头：整体一行，水平居中，和卡片底部保持约 12px 间距；
   箭头与圆点组之间用 gap 保持约 12px 间距（在 10~14px 范围内），不叠在圆点上 ---------- */

.hero-dots-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.hero-dots-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: #CBD5E1;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, width 0.2s;
}

.hero-dot.active {
    background: var(--brand);
    width: 20px;
    border-radius: 999px;
}

/* .btn-yes / .btn-no：全站共用的 Yes/No 操作按钮基础样式，predictions.html（第二套流程）
   和市场卡片网格都在用，不是首页轮播专属，轮播改造时不能删掉这两个类 */
.btn-yes, .btn-no {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-yes {
    background-color: #10b981;
    color: white;
}

.btn-yes:hover {
    background-color: #059669;
}

.btn-no {
    background-color: #ef4444;
    color: white;
}

.btn-no:hover {
    background-color: #dc2626;
}

/* ==================== 预测卡片网格 ==================== */

.markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* 手机版分类搜索"未找到相关市场"：只在 app.js renderMarkets() 判断为
   "有搜索关键词但零结果"时渲染（且只在手机宽度下，见那里的 matchMedia 判断），
   和真正的"当前范围没有任何市场"（沿用旧的纯文字"暂无市场数据"）区分开，
   不复用、不混淆这两种不同的空状态 */
.markets-empty-search {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 16px;
}

.markets-empty-search-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 4px;
}

.markets-empty-search-desc {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
    margin: 0 0 12px;
}

.markets-empty-search-clear-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.markets-empty-search-clear-btn:hover {
    background-color: var(--brand-soft);
}

/* ==================== 市场卡片视觉规格：固定三列、卡片适度放大、留白更宽松 ====================
   #marketsGrid 是首页"全部市场"和所有分类页共用的同一个容器 ID，这里统一用 ID 选择器
   （优先级天然高于上面 .markets-grid 的 auto-fill 基础规则），首页和分类页的市场卡片
   因此使用完全同一套视觉比例，不再用 .main-content.is-full-width 区分首页/非首页两套样式。
   .main-content.is-full-width 现在只保留"隐藏轮播+右侧栏、市场区占满整行"这一个用途，
   见上面 .main-content.is-full-width { grid-template-columns: 1fr; } ==================== */

#marketsGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 卡片整体内边距收紧（底部保留 16px，其余略收），配合下面各区域的收紧共同实现
   卡片整体高度下降，不再继续增高 */
#marketsGrid .market-card {
    padding: 0.7rem 1.25rem 1rem;
}

/* 顶部信息区改成三列网格：图片 / 标题（占满剩余宽度）/ 概率仪表，三者顶部对齐，
   图片和仪表不会被标题挤压，仪表天然贴着卡片右侧和顶部内边距，不需要额外定位 */
#marketsGrid .market-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Logo（缩略图）控制在 44~52px 区间内 */
#marketsGrid .market-card-thumb {
    width: 48px;
    height: 48px;
}

/* 标题缩小约 13%、字重维持 600（原来就是 600，未使用 700/800）、行高收紧到 1.3，
   固定两行高度，不把仪表挤出去、不把按钮向下推 */
#marketsGrid .market-card-head .market-title {
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.16rem;
}

/* 概率仪表在上一轮基础上整体放大约 30%（72x43 -> 94x56），宽高比不变（不变形），
   数字和"是"字号同比例放大，继续保持半圆视觉中心/正下方的位置关系；用父容器内边距
   天然提供与卡片右侧/顶部的安全距离，不用绝对定位，网格自身会给放大后的仪表留出空间、
   不会压住标题（标题所在列是 minmax(0,1fr)，自动让出宽度） */
#marketsGrid .market-card-ring-wrap {
    width: 94px;
    height: 56px;
}

#marketsGrid .market-card-ring-center {
    align-items: center;
    padding-bottom: 0;
}

/* 百分比数字在上一轮基础上再放大约 15%（1.15rem -> 1.3225rem）、再向下移动约 8px
   （translateY(8px) -> 16px，累计 16px），用 transform，不影响布局/水平居中；
   "是"用同样的累计位移量同步下移，字号同步再放大约 15%（0.8rem -> 0.92rem），
   保持和数字之间原有的相对间距不变、不重叠 */
#marketsGrid .market-card-ring-percent {
    font-size: 1.3225rem;
    line-height: 1;
    transform: translateY(16px);
    color: #1F2937;
}

#marketsGrid .market-card-ring-label {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1;
    transform: translateY(16px);
}

#marketsGrid .market-card-ring-col {
    gap: 0.05rem;
}

/* 线条粗度在原有基础上减细约三分之一（4 -> 2.67），轨道和进度弧同步调整，
   两端继续保持圆角（stroke-linecap: round 沿用基础规则，未改动） */
#marketsGrid .market-card-ring-track,
#marketsGrid .market-card-ring-progress {
    stroke-width: 2.67;
}

/* 2026-10 视觉瘦身：高度从 41px 收回到 36px（仍然明显比普通文字按钮高、清楚可点击，
   只是不再是这张卡片里最抢眼的元素），宽度、颜色含义、点击逻辑、data-direction
   都不变，继续固定 height + flex 居中保证两个按钮高度完全一致 */
#marketsGrid .market-btn {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    font-size: 0.72rem;
}

/* 按钮变矮后，原来专门为 41px 高按钮预留的 22px 上间距也跟着收紧到 14px，
   让标题/概率区和按钮区的节奏更紧凑，不再有一大块刻意留出来的空白 */
#marketsGrid .market-buttons {
    margin-top: 14px;
    margin-bottom: 0;
}

/* 底部数据区：字段/图标/数值/字体规则不变，只调整和按钮之间的垂直距离，以及
   图标行与数值行之间的内部间距（不影响字体/图标本身大小） */
#marketsGrid .market-stats-row {
    padding-top: 0.5rem;
}

#marketsGrid .market-stats-col {
    gap: 0.1rem;
}

@media (max-width: 1024px) {
    #marketsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #marketsGrid {
        grid-template-columns: 1fr;
    }
}

/* 卡片右上角书签按钮默认全部隐藏（只隐藏展示，不删除收藏功能——收藏统一通过顶部
   "只看收藏"入口操作，见分类页工具栏），点击事件绑定和 localStorage 收藏数据都不受影响 */
.market-bookmark-btn {
    display: none;
}

/* ==================== "全部市场"数字分页 ==================== */

.markets-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.grid-page-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.grid-page-btn:hover:not(:disabled) {
    background-color: var(--brand-soft);
    border-color: var(--brand);
}

.grid-page-btn.is-active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    cursor: default;
}

.grid-page-btn:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.grid-page-prev,
.grid-page-next {
    padding: 0 0.9rem;
}

.grid-page-ellipsis {
    color: var(--text-muted);
    padding: 0 0.25rem;
    user-select: none;
}

@media (max-width: 640px) {
    .markets-pagination {
        gap: 0.3rem;
    }

    .grid-page-btn {
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.45rem;
        font-size: 0.8rem;
    }

    .grid-page-prev,
    .grid-page-next {
        padding: 0 0.6rem;
    }
}

.market-card {
    position: relative;
    background-color: white;
    border-radius: 0.75rem;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    border-top: 3px solid var(--cat-color, #e0e0e0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
}

/* 市场浏览返回体验：用户从详情页返回列表页时，标记"刚才点进去的是这一张"，
   只加轻微阴影，不改尺寸/不改 grid 布局，不影响 .market-card 已有的顶部分类色
   边条（不碰 border-top/border-color，避免和 --cat-color 冲突）。同一份规则
   复用给首页网格卡片（.market-card）、已结算纵向列表行（.market-settled-row）、
   predictions.html 卡片（.pred-market-card）、hot-markets.html 卡片
   （.hot-modal-row）——见 marketReturnState.js，四种卡片容器共用同一个高亮类名。
   box-shadow 数值来自过渡动画已有的 0.18s ease，不需要额外声明 transition。 */
.market-return-highlight {
    box-shadow: 0 6px 20px rgba(59, 91, 255, 0.18);
}

/* 卡片右上角小书签按钮：绝对定位，不占用/不改变原有 flex 布局流 */
.market-bookmark-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.market-bookmark-btn svg {
    width: 1rem;
    height: 1rem;
}

.market-bookmark-btn:hover {
    color: var(--brand);
}

.market-bookmark-btn.is-favorited {
    color: var(--brand);
}

.market-bookmark-btn.is-favorited svg {
    fill: currentColor;
}

.market-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: #2563eb;
    border-top-color: var(--cat-color, #2563eb);
    transform: translateY(-2px);
}

/* 首页市场卡片边框统一：删除分类彩色顶线，改为和其余三边一致的浅灰色细边框。
   只限定在 #marketsGrid 内（首页普通卡片/搜索结果/最新上架/即将结束/结算中/已结算，
   这些视图全部复用同一个 #marketsGrid 容器），不改动共享的 .market-card 基础规则本身——
   predictions.html 的 .pred-market-card 也复用 .market-card，但用的是 #predMarketsGrid
   容器，不受这里影响，继续保留原有分类色顶线 */
#marketsGrid .market-card {
    border-top: 1px solid #e0e0e0;
}

#marketsGrid .market-card:hover {
    border-top-color: #2563eb;
}

/* ==================== 首页统一设计规范 ====================
   只在首页（.main-content 不带 .is-full-width，即分类页/热门市场独立页/详情页等
   全部不受影响）：市场卡片的圆角、边框颜色、阴影强度和左侧轮播、右侧热门市场统一成
   同一套设计规范，让整个首页看起来像同一个设计系统做出来的；只调视觉规范本身，
   不改变卡片尺寸、结构、内容和功能（顶部分类色细线、Yes/No 按钮、概率仪表等都不变）。 */
.main-content:not(.is-full-width) #marketsGrid .market-card {
    border-radius: 16px;
    border-color: var(--border);
    border-top-color: var(--border);
    box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
    .market-card { transition: none; }
    .market-card:hover { transform: none; }
}

.market-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
    line-height: 1.4;
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 首页小卡片不再单独展示分类文字（分类筛选仍由顶部分类选项卡负责），
   .market-card-meta 现在只用来放"热门/即将结束"这类真实状态标签，没有标签时整行不渲染 */
.market-card-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* ---------- 左上角市场缩略图 + 标题 + 右上角 Yes 概率圆环 ---------- */

.market-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.market-card-head .market-title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.market-card-thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
}

/* 手机版首屏优化（2026-09 第二轮）：图片还没加载完时，缩略图区域用一个轻量的浅灰占位色
   代替空白，避免出现明显留白；不改变尺寸，图片加载完成后会正常覆盖在上面，不影响裁切/
   圆角。只在手机宽度下生效，不影响桌面端现有视觉表现。 */
@media (max-width: 768px) {
    .market-card-thumb {
        background-color: #e5e7eb;
    }
}

.market-card-thumb-real,
.market-card-thumb-default {
    width: 100%;
    height: 100%;
}

.market-card-thumb-real {
    background-size: cover;
    background-position: center;
    /* 2026-09 首屏加载顺序优化：真实图片从 background-image 的 <div> 改成了 <img>，
       object-fit/object-position 是 <img> 生效的裁切方式，等效替代上面对 <div> 生效的
       background-size/background-position（保留旧属性不影响、不删除，只是现在对 <img> 无效） */
    object-fit: cover;
    object-position: center;
    display: block;
}

.market-card-thumb-default {
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-card-thumb-glyph {
    font-size: 1.1rem;
    color: #fff;
    opacity: 0.95;
}

.market-card-ring-col {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

/* 半圆形概率仪表：容器改成比原来正方形更矮更宽的比例（对应 SVG viewBox "0 0 40 24"），
   完全在卡片内部，不悬空、不越界，尺寸保持紧凑（不是完整圆环，也不做大） */
.market-card-ring-wrap {
    position: relative;
    width: 48px;
    height: 29px;
}

.market-card-ring-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.market-card-ring-track {
    fill: none;
    stroke: #E5E7EB;
    stroke-width: 4;
    stroke-linecap: round;
}

.market-card-ring-progress {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .market-card-ring-progress { transition: none; }
}

/* 半圆开口朝下，数字放在弧形内部靠下的位置（不是整圆的正中心） */
.market-card-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1px;
}

.market-card-ring-percent {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.market-card-ring-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.market-status-tag {
    flex: none;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.market-status-tag.is-hot {
    background: #FFFBEB;
    color: var(--warning);
}

.market-status-tag.is-ending {
    background: var(--loss-soft);
    color: var(--loss);
}

.market-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0;
}

/* ---------- 卡片底部统一一行：流动性 | 交易量 | 市场热度 ---------- */

.market-stats-row {
    display: flex;
    align-items: stretch;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid #eef0f2;
}

.market-stats-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0 0.4rem;
}

.market-stats-col:first-child {
    padding-left: 0;
}

.market-stats-col:last-child {
    padding-right: 0;
}

.market-stats-col + .market-stats-col {
    border-left: 1px solid #eef0f2;
}

.market-stats-head {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.66rem;
    color: #9ca3af;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2026-10 视觉瘦身：图标调小、调淡，让它退成辅助装饰而不是和数值抢视觉重量，
   数值本身（真实数据）的字号/颜色不变 */
.market-stats-icon {
    flex: none;
    font-size: 0.64rem;
    line-height: 1;
    opacity: 0.6;
}

.market-stats-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-stats-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
}

/* ---------- 非首页分类页面卡片底部（v2）：左侧"交易量 流动性"、右侧"奖励+收藏"按钮，
   同一行、左右两组用 space-between 撑开；align-items 改成 flex-end，让右侧按钮组的
   底边和左侧交易量/流动性数值的底边对齐（按钮本身比数值矮，用 flex-end 贴底，
   不再用 center 导致按钮底边比数值底边高出一截）。只在 buildMarketStatsRowHtml 判断为
   非首页时才会渲染这套结构，首页继续用上面原有的三列结构，不受影响 ---------- */
.market-stats-row-v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.market-stats-row-left {
    display: flex;
    align-items: center;
    /* 2026-10 收紧到 1rem（原 1.25rem），给右侧奖励/收藏图标多留一点呼吸空间，
       缓解整行"成交量+流动性+热度+两个图标"挤在一起的拥挤感，不删除任何一项数据 */
    gap: 1rem;
    min-width: 0;
}

.market-stats-row-left .market-stats-col.market-stats-col-v2 {
    flex: none;
    padding: 0;
}

.market-stats-row-left .market-stats-col.market-stats-col-v2 + .market-stats-col.market-stats-col-v2 {
    border-left: none;
}

.market-card-actions {
    display: flex;
    align-items: center;
    /* 两个按钮之间约 10px 间距 */
    gap: 0.625rem;
    flex: none;
}

.market-action-btn {
    /* 点击区域在原 1.5rem(24px) 基础上放大约 25% -> 1.875rem(30px) */
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    flex: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.market-action-btn svg {
    /* 图标在原 1rem(16px) 基础上放大约 25% -> 1.25rem(20px) */
    width: 1.25rem;
    height: 1.25rem;
}

.market-action-btn:hover,
.market-reward-btn[aria-expanded="true"] {
    background-color: #f3f4f6;
    color: #4b5563;
}

.market-action-favorite-btn.is-favorited {
    color: #2563eb;
}

.market-action-favorite-btn.is-favorited svg {
    fill: currentColor;
}

/* ---------- 挂单奖励弹层：全站共用同一个节点（见 index.html #rewardPopover），
   由 app.js 的 showRewardPopover 根据当前触发按钮动态定位，不是每张卡片各自一份 ---------- */
.reward-popover {
    position: fixed;
    z-index: 1900;
    width: 320px;
    max-width: calc(100vw - 16px);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.1rem;
}

.reward-popover-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
}

.reward-popover-section {
    margin-bottom: 0.6rem;
}

.reward-popover-text {
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 0.3rem;
}

.reward-popover-more-btn {
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 0.78rem;
    padding: 0;
    cursor: pointer;
}

.reward-popover-more-btn:hover {
    text-decoration: underline;
}

.reward-popover-detail {
    margin: 0.4rem 0 0.8rem;
    padding: 0.7rem 0.8rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.reward-popover-detail-block + .reward-popover-detail-block {
    margin-top: 0.6rem;
}

.reward-popover-detail-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.25rem;
}

.reward-popover-detail-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.74rem;
    color: #6b7280;
    line-height: 1.5;
}

.reward-popover-cta-btn {
    display: block;
    width: 100%;
    height: 2.2rem;
    border: none;
    border-radius: 0.5rem;
    background: #2563eb;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.reward-popover-cta-btn:hover {
    background: #1d4ed8;
}

@media (max-width: 480px) {
    .reward-popover {
        width: calc(100vw - 24px);
    }
}

.market-btn {
    padding: 0.5rem;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.market-btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    color: #111827;
    border: 1px solid #d1d5db;
}

.market-btn-detail:hover {
    background-color: #e5e7eb;
}

.market-detail-link {
    color: inherit;
    text-decoration: none;
}

.market-detail-link:hover {
    color: #2563eb;
}

.detail-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.detail-title-area {
    flex: 1.2;
    min-width: 260px;
}

.detail-title-area h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.detail-category-tag {
    display: inline-block;
    /* 本轮：取消蓝色胶囊徽标样式（背景+蓝色文字），改成和标题左对齐的纯文字，
       颜色改成深灰色（比标题的深色稍浅，不抢标题视觉重量），左右不再需要胶囊内边距，
       只保留和标题之间的垂直间距 */
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* #detailCategoryTag 内部实际是 marketDetail.js 写入的一个 <a href="/?category=...">
   （点击跳转回首页对应分类，这个功能本轮不动），浏览器默认的链接蓝色/下划线优先级
   高于父元素继承的 color，必须在这里单独覆盖，否则上面刚改的深灰色不会生效 */
.detail-category-tag a,
.detail-category-tag a:visited {
    color: inherit;
    text-decoration: none;
}

/* 市场详情页顶部标题区域连续缩小动画：分类标签随滚动连续淡出+轻微上移，不是在某个
   滚动位置突然 display:none。.detail-category-tag 目前只在 market-detail.html 用到，
   这里仍然加 body.page-market-detail 前缀限定范围，避免以后别的页面复用这个类名时
   被这段动画影响。
   max-height/margin-bottom/padding 同样随 --mh-progress 连续收缩到 0（配合
   overflow:hidden）——只淡出 opacity 的话，标签本身仍然占着一整行的布局高度（只是
   看不见），会导致标题没办法真正居中到缩小后的图标中间，必须让它的真实占位高度
   也跟着连续收缩到 0，标题才能跟着图标一起连续"收紧"，而不是停在原来的位置不动 */
body.page-market-detail .market-header-card .detail-category-tag {
    opacity: calc(1 - var(--mh-progress, 0));
    transform: translateY(calc(var(--mh-progress, 0) * -6px));
    max-height: calc(1.7rem - (var(--mh-progress, 0) * 1.7rem));
    /* 本轮：分类/标题之间的间距基准值从 0.75rem 收紧到 0.3rem（更紧凑），
       同样随滚动连续收缩到 0，曲线形状不变 */
    margin-bottom: calc(0.3rem - (var(--mh-progress, 0) * 0.3rem));
    padding-top: calc(0.35rem - (var(--mh-progress, 0) * 0.35rem));
    padding-bottom: calc(0.35rem - (var(--mh-progress, 0) * 0.35rem));
    overflow: hidden;
}

.detail-summary {
    flex: 0.9;
    min-width: 260px;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}

.detail-summary h2 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.detail-summary .detail-grid {
    display: grid;
    gap: 0.75rem;
}

.detail-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #374151;
}

.detail-stat:last-child {
    border-bottom: none;
}

.detail-grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-card,
.detail-panel {
    background-color: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.detail-card h2,
.detail-panel h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.chart-card {
    padding: 1.25rem 1.5rem;
    /* 去框架化（本轮新增）：不用卡片白底/边框/圆角/阴影，直接融入页面背景；
       只用和标题区域之间的一条极淡横线做分隔，不用完整四边框 */
    background-color: transparent;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.chart-header {
    display: none;
}

/* Yes/No 价格徽标 + 时间范围切换按钮同一行：左侧价格，右侧范围按钮 */
.chart-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

/* 第九阶段：chart-header-row 只在手机版重构时新增，用来把"价格徽标 + 图表设置按钮"
   包成一组。桌面端用 display:contents 让它在盒模型里"消失"，价格徽标直接变成
   .chart-controls-row 的 flex 子项——和修改前的 DOM 结构在渲染层面完全等价，
   桌面视觉不受影响（新增的 .chart-settings-btn 桌面端本来就 display:none，
   不占任何空间）。手机版会在下面的媒体查询里把它改回真正的 flex 行 */
.chart-header-row {
    display: contents;
}

.chart-settings-btn {
    display: none;
}

.chart-price-badges {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.chart-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.chart-price-badge strong {
    color: #111827;
    font-weight: 700;
}

.chart-price-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.chart-price-badge-yes .chart-price-dot {
    /* 和首页重点市场走势图统一：Yes 绿色体系（#16A34A） */
    background-color: #16A34A;
}

.chart-price-badge-no .chart-price-dot {
    /* 和首页重点市场走势图统一：No 红色体系（#DC2626） */
    background-color: #DC2626;
}

/* 图表左上角实时涨跌幅（本轮新增）：和 chart-price-badge 同一行，字号/字重自成一档，
   颜色通过 JS 切换 up/down/flat 三个类名，不用内联 style，方便手机端媒体查询统一覆盖 */
.chart-price-change {
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 0.1rem;
}

.chart-price-change-up {
    color: #16A34A;
}

.chart-price-change-down {
    color: #DC2626;
}

.chart-price-change-flat {
    color: var(--text-muted, #94a3b8);
}

/* 本轮：新增"是/否切换"按钮后，图表展示模式（yes/no/both）在桌面端和手机端统一由
   同一套状态决定（marketDetail.js 的 getChartMode()），不再是"桌面恒定只显示Yes、
   手机走单独的 bottom sheet"。这里把原来只在手机端生效的
   body[data-mobile-chart-mode] 属性选择器规则挪到不限断点的地方，桌面端现在也会
   跟着这个属性动态显示/隐藏对应的 是/否 徽标 —— 属性本身仍然叫
   data-mobile-chart-mode（沿用旧名避免改动面扩大到无关代码），但 marketDetail.js
   现在会在桌面端也写入这个属性，不再像以前那样桌面端 delete 掉它 */
body.page-market-detail[data-mobile-chart-mode="yes"] .chart-price-badge-no,
body.page-market-detail[data-mobile-chart-mode="no"] .chart-price-badge-yes {
    display: none;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    min-height: 340px;
    /* 本轮只改背景色：.chart-card 外层本身已经是透明的（见上面去框架化改动），但这个
       内层 wrapper 之前单独写死了白色背景，导致图表区域视觉上仍然是一块白板。改成和
       详情页主背景一致，尺寸/圆角/边框/间距/阴影一律不变 */
    background-color: var(--page-bg);
    border-radius: 0.75rem;
    /* 删除图表区域外层的一圈灰色边框（本轮）：只去掉 border 这一项，尺寸/圆角/背景色/
       内边距/阴影/时间按钮/曲线/坐标轴/Tooltip 均不受影响，Chart.js 画布尺寸由
       marketDetail.js 的 canvas clientHeight 决定，和这个边框无关 */
    border: none;
    padding: 1rem;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}

.chart-wrapper canvas {
    width: 100%;
    height: 320px;
}

/* 雷达脉冲覆盖层：和主图表 canvas 完全重叠的独立透明画布，只画两个末端脉冲点，
   不参与鼠标事件（pointer-events:none，鼠标交互仍然只由下面的主图表 canvas 处理），
   这样脉冲动画可以持续独立重绘，不需要每一帧都重新画整条曲线 */
.chart-wrapper canvas#chartPulseOverlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);
    height: 320px;
    pointer-events: none;
    z-index: 2;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    color: #475569;
    font-size: 0.9rem;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 999px;
}

.probability-yes {
    background-color: #2563eb;
}

.probability-no {
    background-color: #ef4444;
}

.volume-bar {
    background-color: #fbbf24;
}

/* 走势图下方市场摘要栏：成交量/结束时间/市场状态/流动性/市场热度，只读镜像展示，紧凑单行 */
.chart-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f3f4f6;
}

.chart-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #374151;
    white-space: nowrap;
}

.chart-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    width: 1.1rem;
}

.chart-summary-icon-volume {
    color: #2563eb;
    font-weight: 700;
    /* 只隐藏"成交量"最前面这一个 $ 图标本身，不影响同一个 .chart-summary-item 里
       后面的"成交量"文字和数值，也不影响其它摘要项（结束时间/市场状态/流动性/市场热度）
       各自的图标，因为它们用的是各自独立的类（.chart-summary-icon-time 等） */
    display: none;
}

.chart-summary-icon-time {
    color: #6b7280;
}

.chart-summary-icon-status {
    color: #9ca3af;
    font-size: 0.6rem;
}

.chart-summary-icon-status.is-open {
    color: #16a34a;
}

.chart-summary-icon-liquidity {
    color: #0891b2;
}

.chart-summary-icon-heat {
    color: #f59e0b;
}

.chart-summary-label {
    color: #9ca3af;
}

.chart-summary-value {
    color: #111827;
    font-weight: 600;
}

/* 统计栏最右侧 ASFO 品牌展示（本轮新增）：margin-left:auto 在同一个 flex 行里把这一项
   推到最右边，不用绝对定位。纯展示，不加链接/跳转，不是新功能入口。字号/颜色参考现有
   统计文字的字重层级，Logo 文字比统计数值稍小，不会显得比统计文字"明显高大" */
.chart-summary-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}

.chart-summary-brand-logo {
    /* 和全站导航栏/页脚完全相同的品牌蓝（.navbar-logo h1 用的也是 #2563eb），
       站内目前没有任何 Logo 图片文件，这里是复用同一套文字样式，不是新建图形 Logo */
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563eb;
    line-height: 1;
}

.chart-summary-brand-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1;
    white-space: nowrap;
}

/* 图表时间范围切换按钮：复用现有 .orderbook-tab 的选中/未选中配色，不新造一套配色 */
.chart-range-switcher {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.chart-range-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: #f8fafc;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.chart-range-btn.active {
    background-color: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

/* 本轮新增：时间范围按钮右边再放"是/否切换"+"显示设置"两个图标按钮。
   #chartRangeSwitcher 本身不裁剪溢出（否则会连带裁掉下面设置面板的下拉展开），
   真正需要横向滚动安全网的是范围按钮+切换按钮这一小段，单独包一层
   .chart-range-scroll-area 来做，设置按钮和它的面板留在裁剪范围外面 */
.chart-range-switcher {
    align-items: center;
}

.chart-range-scroll-area {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.chart-range-scroll-area::-webkit-scrollbar {
    display: none;
}

.chart-control-divider {
    width: 1px;
    height: 18px;
    background-color: var(--border, #e5eaf2);
    flex-shrink: 0;
    margin: 0 0.1rem;
}

.chart-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background-color: #f8fafc;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.chart-icon-btn svg {
    width: 15px;
    height: 15px;
}

.chart-icon-btn:hover {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #93c5fd;
}

/* 切换按钮悬停提示："查看否"/"查看是"文字内容由 JS 根据当前状态更新，这里只负责
   默认隐藏 + hover/focus 时淡入显示，不需要 JS 控制显示/隐藏本身 */
.chart-icon-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #111827;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.3rem 0.55rem;
    border-radius: 0.35rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 20;
}

.chart-icon-btn:hover .chart-icon-tooltip,
.chart-icon-btn:focus-visible .chart-icon-tooltip {
    opacity: 1;
}

.chart-settings-popover {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    /* 显式 z-index（不是 auto）让这个元素自己建立一个新的层叠上下文，面板展开时
       才能稳定盖在 .chart-wrapper 的内容上面——canvas 所在的 .chart-wrapper 虽然也是
       position:relative，但它本身 z-index:auto 不建立层叠上下文，主图表 canvas 又是
       非定位元素，本来 z-index:30 的面板应该已经能盖过去。
       本轮修复呼吸点穿透：之前这里写的是 z-index:2，和 #chartPulseOverlay（脉冲呼吸点
       画布，见 .chart-wrapper canvas#chartPulseOverlay 规则）的 z-index 恰好都是 2——
       两个层叠上下文的 z-index 打平手时，由 DOM 顺序决定胜负，.chart-wrapper 在
       .chart-controls-row 后面，打平手时呼吸点所在的 .chart-wrapper 胜出，穿透到
       设置面板上面。这里把 popover 的 z-index 提高到 5，明确高于呼吸点的 2，不再打平手，
       同时仍然低于吸顶标题卡片的 z-index:10，不影响滚动吸顶时的层级关系 */
    z-index: 5;
}

.chart-settings-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 0.75rem;
    z-index: 30;
}

.chart-settings-panel[hidden] {
    display: none;
}

/* 面板高度比较高，手机端小屏幕上如果按钮位置偏下，向下展开会超出视口底部——
   打开面板时 JS 会测量一次可用空间，不够就加这个类改成向上展开，纯视觉调整，
   不影响面板内容/开关逻辑 */
.chart-settings-panel.chart-settings-panel-flip-up {
    top: auto;
    bottom: calc(100% + 8px);
}

.chart-settings-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.chart-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.chart-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0;
}

.chart-toggle-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.chart-toggle-track {
    position: absolute;
    inset: 0;
    background-color: #e5e7eb;
    border-radius: 999px;
    transition: background-color 0.15s ease;
    pointer-events: none;
}

.chart-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.chart-toggle-input:checked ~ .chart-toggle-track {
    background-color: var(--brand, #2563eb);
}

.chart-toggle-input:checked ~ .chart-toggle-thumb {
    transform: translateX(14px);
}

.chart-source-label {
    display: none;
}

.chart-empty-range {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    color: #9ca3af;
    font-size: 0.9rem;
}

.chart-tooltip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    color: #374151;
    line-height: 1.5;
    min-width: 130px;
}

.chart-tooltip-time {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.chart-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.chart-tooltip-dot.yes {
    /* 和首页重点市场走势图统一：Yes 绿色体系 */
    background-color: #16A34A;
}

.chart-tooltip-dot.no {
    /* 和首页重点市场走势图统一：No 红色体系 */
    background-color: #DC2626;
}

.chart-tooltip-volume {
    color: #92400e;
}

.chart-tooltip-source {
    margin-top: 0.25rem;
    color: #9ca3af;
    font-size: 0.7rem;
}

/* 本轮只改背景色，让"市场规则/市场背景"卡片和详情页整体背景统一，不再是单独凸出的
   白色板块；圆角/边框/阴影（继承自 .detail-card）/间距/布局/文字/功能一律不变 */
.market-rules-card {
    background-color: var(--page-bg);
    /* 删除"市场规则/市场背景"卡片外面的完整框架线：这张卡片本来通过
       class="detail-card market-rules-card" 继承 .detail-card 的 1px 边框，这里单独
       覆盖去掉，不影响同样继承 .detail-card 的 "相关市场" 卡片（#relatedMarketsCard
       没有 .market-rules-card 这个类，不受这条规则影响）。
       本轮再去掉同样继承自 .detail-card 的 box-shadow（手机端之前已经通过共用的
       .detail-card 移动端规则变成 none，这里把桌面端也补上，消除最后一点"独立卡片"
       的立体感），背景色已经是 var(--page-bg)，和页面主背景完全一致；圆角/内边距/
       Tab/展开逻辑/开放时间文案均未触碰 */
    border: none;
    box-shadow: none;
}

/* "市场规则 / 市场背景"顶部横向 Tab：同一张卡片，共用一个内容区域，同一时刻只显示一个
   （见 marketDetail.js switchMarketInfoTab）。电脑版/手机版共用这一套样式，未额外区分
   断点——文字大小/间距本身已经适配两端，不需要响应式差异化 */
.market-info-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 1rem;
}

.market-info-tab {
    border: none;
    background: none;
    padding: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: #737373;
    position: relative;
    cursor: pointer;
}

.market-info-tab.is-active {
    color: #333333;
    font-weight: 700;
}

.market-info-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--brand, #2563eb);
    border-radius: 1px;
}

.market-tab-panel[hidden] {
    display: none;
}

/* 市场背景面板：【市场概况/背景说明/可能影响市场变化的因素】分段正文 + 弱化免责声明 +
   更新时间。所有数字/时间都由 marketDetail.js renderMarketBackground 从当前 market
   对象实时渲染写入，这里只负责视觉样式，不在 CSS 里写死任何具体数字/时间。
   （顶部原有的"当前市场数据"灰色数据块已按要求整体删除，不再保留对应样式） */
.market-background-section {
    margin-bottom: 1rem;
}

.market-background-section:last-of-type {
    margin-bottom: 0;
}

.market-background-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.4rem;
}

.market-background-body p {
    color: #404040;
    font-size: 13px;
    line-height: 22px;
    margin: 0 0 11px;
}

.market-background-body p:last-child {
    margin-bottom: 0;
}

.market-background-factor-list {
    margin: 0;
    padding-left: 1.1rem;
    color: #404040;
    font-size: 13px;
    line-height: 22px;
}

.market-background-factor-list li {
    margin-bottom: 6px;
}

.market-background-factor-list li:last-child {
    margin-bottom: 0;
}

.market-background-disclaimer {
    margin-top: 1rem;
    font-size: 12px;
    line-height: 1.6;
    color: #a3a3a3;
}

.market-background-updated {
    margin-top: 0.4rem;
    font-size: 12px;
    color: #a3a3a3;
}

/* 市场规则模块：结束时间 / 结算条件 / 结算来源，复用现有卡片白底/边框/圆角 */
.market-rules-row {
    margin-bottom: 0.85rem;
}

.market-rules-row:last-child {
    margin-bottom: 0;
}

.market-rules-label {
    display: block;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.market-rules-value {
    display: block;
    color: #374151;
    line-height: 1.7;
    word-break: break-word;
}

.market-rules-value a {
    color: #2563eb;
    text-decoration: none;
}

.market-rules-value a:hover {
    text-decoration: underline;
}

.market-rules-divider {
    border-top: 1px solid #f3f4f6;
    margin: 0.85rem 0;
}

/* 市场规则完整结构化内容（判定标准/具体说明/判定依据/截止时间等，见 marketRules.js）：
   电脑版/手机版共用同一份 DOM 和同一套展开/收起交互，只有收起高度不同——这里是电脑版
   （默认，未命中下面 max-width:768px 手机媒体查询时生效）的收起高度，比手机版更高，
   符合用户"电脑版可以直接展示更完整内容"的要求，同时长规则依然有收起/展开，不会让
   详情页无限拉长 */
.market-rules-section {
    margin-bottom: 1rem;
}

.market-rules-section:last-child {
    margin-bottom: 0;
}

.market-rules-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.35rem;
}

.market-rules-section-body {
    color: #374151;
    line-height: 1.7;
    font-size: 0.88rem;
}

.market-rules-section-body p {
    margin: 0 0 0.6rem;
}

.market-rules-section-body p:last-child {
    margin-bottom: 0;
}

.market-rules-section-body a {
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
}

.market-rules-section-body a:hover {
    text-decoration: underline;
}

.market-rules-note {
    color: #9ca3af;
    font-size: 0.8rem;
}

.market-rules-hint {
    color: #6b7280;
    font-size: 0.82rem;
    font-style: italic;
}

.market-rules-body-wrap {
    /* 普通块级流：内容有多少，这个容器就有多高，不设 max-height/overflow，
       展开时父卡片、下面的时间行、相关市场模块都会随内容自然被推下去 */
}

/* 默认收起态：只有【判定标准】预览文字 + 行内"……展开"，见 marketDetail.js
   renderRulesCollapsed。这段文字和"展开"同属一个 <p>，靠正常文字流自然换行，
   不用 line-clamp/max-height 裁切，就不会出现"父容器高度卡死、内容溢出"的问题 */
.market-rules-preview-text {
    color: #374151;
    line-height: 1.7;
    font-size: 0.88rem;
    margin: 0;
}

.market-rules-ellipsis {
    color: #9ca3af;
}

/* "展开"/"收起"：行内文字链接，不是独立大按钮——字号和正文一致，颜色用浅蓝，
   紧跟在预览文字/完整规则内容后面，靠 inline 自然排布 */
.market-rules-inline-toggle {
    display: inline;
    margin-left: 0.2rem;
    padding: 0;
    border: none;
    background: none;
    color: #60a5fa;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

.market-rules-inline-toggle:hover {
    color: var(--brand, #2563eb);
}

.market-rules-collapse-btn {
    display: block;
    margin-top: 0.6rem;
    margin-left: 0;
}

/* 开放时间/结束时间：规则内容区域最下面，普通文档流兄弟元素，图标复用现有的
   时钟 SVG（和首页"最近搜索"用的是同一份 path，不新增图标资源）。桌面端宽度够，
   两项可以同一行；手机端一行一个（见下方 max-width:768px 覆盖） */
.market-rules-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f3f4f6;
}

.market-rules-time-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.market-rules-time-icon {
    width: 15px;
    height: 15px;
    color: #737373;
    flex: none;
}

.market-rules-time-label {
    font-size: 0.78rem;
    color: #737373;
}

.market-rules-time-value {
    font-size: 0.8rem;
    color: #404040;
}

.market-rules-expand-btn {
    display: block;
    margin-top: 0.6rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--brand, #2563eb);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.detail-card p,
.detail-panel p {
    margin-bottom: 1rem;
    color: #4b5563;
    line-height: 1.7;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* 2026-07-13：从 .market-header-card 卡片内部搬到卡片外面独立一行（避免标签把可吸顶的
       标题核心区域撑高），现在直接是 .market-layout-left 的子元素，用左右内边距对齐其它卡片的
       内容起始位置；卡片之间的纵向间距已经由 .market-layout-left 的 gap 统一处理，这里不用再加 margin */
    padding: 0 0.25rem;
}

.detail-tags:empty {
    display: none;
}

.detail-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background-color: #f3f4f6;
    font-size: 0.8rem;
    color: #374151;
}

.detail-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.detail-actions .btn-yes,
.detail-actions .btn-no {
    flex: 1;
}

.section-row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-card {
    background-color: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}

.section-card h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-list-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid #f3f4f6;
}

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

.detail-list-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #111827;
}

.related-markets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.related-market-card {
    background-color: #f8fafc;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}

.related-market-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.related-market-card p {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0.75rem;
}

.related-market-card a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #111827;
    text-decoration: none;
    font-weight: 600;
}

.btn-back:hover {
    background-color: #f8fafc;
}

.detail-back-row {
    margin-bottom: 0.75rem;
}

/* 2026-07-13 视觉瘦身：详情页顶部"返回首页"按钮和面包屑导航整体隐藏，不保留占位高度。
   只影响展示，不改路由/链接本身（DOM 保留，纯 display:none） */
.detail-back-row,
.detail-breadcrumb {
    display: none;
}

@media (max-width: 1024px) {
    .detail-grid-main {
        grid-template-columns: 1fr;
    }

    .section-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .detail-header {
        flex-direction: column;
    }

    .detail-summary {
        width: 100%;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-range-switcher {
        width: 100%;
        /* 横向滚动安全网本轮移到内层 .chart-range-scroll-area 承担（见上面不限断点的
           新规则），#chartRangeSwitcher 自己不再裁剪溢出——这里以前直接写
           overflow-x:auto，会把后面新增的"显示设置"下拉面板一起裁掉，面板展开后
           完全不可见 */
        padding-bottom: 0.15rem;
    }

    .chart-range-scroll-area {
        -webkit-overflow-scrolling: touch;
    }

    /* 手机端：第一行 Yes/No 价格，第二行 24H/7D/30D/全部，不挤在同一行导致换行错位 */
    .chart-controls-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-price-badges {
        width: 100%;
    }

    .chart-tooltip {
        max-width: calc(100vw - 4rem);
    }

    .chart-summary-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 1rem;
    }

    .chart-summary-item {
        white-space: normal;
    }
}

/* 2026-10 首页卡片视觉优化：改用全站已有的 --profit-soft/--loss-soft 淡色 token
   （原来是单独写死的更饱和 #d1fae5/#fee2e2），降低饱和度，让按钮退到"清晰可点击的
   操作入口"而不是和标题/概率抢视觉重心的强彩色色块；颜色含义（绿=Yes/红=No）、
   点击逻辑、data-direction 一个字不变 */
.market-btn-yes {
    background-color: var(--profit-soft, #ECFDF3);
    color: var(--profit, #059669);
    border: 1px solid #bbf0d2;
}

.market-btn-yes:hover {
    background-color: #d7f6e4;
}

.market-btn-no {
    background-color: var(--loss-soft, #FEF2F2);
    color: var(--loss, #dc2626);
    border: 1px solid #f8cdd1;
}

.market-btn-no:hover {
    background-color: #fbdfe1;
}

/* ==================== 右侧栏 ==================== */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    height: 100%;
}

/* 主内容与侧栏之间的一条纵向分隔线：明确"这是主列，那是辅助栏"的阅读分区，
   常见于新闻站/交易平台的双栏布局，帮助视线知道该在哪一列继续往下读 */
.sidebar::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--divider);
}

/* ==================== 右侧真实市场导航模块 ====================
   热门市场 / 即将结束 / 最新市场，全部来自 /api/markets 已有真实字段，
   不产生任何"即将推出"式的不可点击占位模块。
   圆角/边框/阴影和左侧轮播、下方市场卡片统一成同一套设计规范（见下方"首页统一设计规范"）。 */

.side-module {
    background-color: var(--surface);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}

/* 首页右侧目前只剩"热门市场"一个可见模块（即将结束/最新市场仍然隐藏）。卡片本身的高度
   由 JS（syncHotMarketsSidebarHeight）量出左侧轮播的真实渲染高度后直接赋值，这里只负责
   拿到高度之后内部怎么分布：条目区域 flex:1 占满整个高度，每个条目再 flex:1 平均分这块
   空间；overflow:hidden 是保险，理论上不会真的溢出。
   去掉外层白色卡片框架：不用 .side-module 共享的白底/边框/圆角/阴影，背景改成透明
   （和首页默认灰白背景一致）；上下 padding 去掉，让标题和最后一条内容分别贴到这个
   高度区域的顶部/底部（=左侧轮播的顶部/底部），左右 padding 保留，宽度/水平位置不变。 */
.side-module-hot {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 1.25rem;
}

.side-module-hot .side-list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.side-module-hot .side-item {
    flex: 1;
    min-height: 0;
}

/* 三个模块各自固定的顶部强调色 + 标题图标，不随数据变化，只用来区分三个模块的身份；
   "热门市场"改回和其它普通窗口一致的浅灰色顶部边框（不再单独设色，跟随 .side-module 默认值） */
.side-module-ending { border-top-color: var(--warning); }
.side-module-latest { border-top-color: #0D9488; }

.sidebar h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.side-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.side-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    /* 上下留白比原来增加约 8px（0.6rem -> 0.85rem，每侧 +0.25rem），显得更轻、更整洁 */
    padding: 0.85rem 0.4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.side-item:hover {
    background-color: var(--surface-muted);
}

.side-item-rank {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.26rem;
    height: 1.26rem;
    color: white;
    border-radius: 0.25rem;
    font-size: 0.63rem;
    font-weight: 700;
}

/* 排名徽章改成固定的柔和奖牌色（金/银/铜/浅灰蓝），不再用 JS 内联的市场分类色。
   前三名的背景色是 renderHotMarkets 用 style="background:..." 内联设置的真实分类色
   （本轮不修改 JS/数据），这里用 :nth-child 按"第几条"定位、!important 覆盖内联样式，
   不需要改模板就能统一成固定配色；第 4 条沿用 JS 附加的 .is-neutral 类兜底选中 */
#hotMarketsList .side-item-hot:nth-child(1) .side-item-rank {
    background-color: #D9A441 !important;
}

#hotMarketsList .side-item-hot:nth-child(2) .side-item-rank {
    background-color: #A8B0BD !important;
}

#hotMarketsList .side-item-hot:nth-child(3) .side-item-rank {
    background-color: #C98555 !important;
}

#hotMarketsList .side-item-hot:nth-child(n+4) .side-item-rank,
.side-item-rank.is-neutral {
    background-color: #B8C2D1 !important;
}

/* 排名方块和市场标题第一行垂直居中对齐：标题可能两行（长标题）也可能一行，
   用 flex-start 让排名贴着整行内容的顶部（=标题第一行的位置），而不是跟着标题
   的总高度（1 行或 2 行 + 下面的数据行）居中漂移；再用一点 margin-top 精确对准
   第一行文字的垂直中心，不影响标题/概率/成交量本身的字号和内容 */
#hotMarketsList .side-item-hot {
    align-items: flex-start;
}

#hotMarketsList .side-item-hot .side-item-rank {
    margin-top: 0.15rem;
}

.side-item-body {
    flex: 1;
    min-width: 0;
}

.side-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.2rem;
}

.side-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.55rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.side-item-meta .is-yes { color: var(--yes-text); font-weight: 600; }

/* 热门市场：右侧热度小标签只做显示层隐藏，热度字段/计算逻辑不受影响（app.js 仍然
   渲染这个元素和真实数值，只是不再可见）；display:none 会让它退出 flex 布局，
   不会在右侧留白占位，标题所在的 .side-item-body（flex:1）自动补满这块宽度 */
.side-heat-tag {
    display: none;
}

/* 即将结束：左侧真实倒计时，剩余时间越短提醒色越明显（门槛见 getCountdownUrgencyClass，
   只影响颜色展示，不影响真实倒计时数值） */
.side-item-countdown {
    flex: none;
    width: 3.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
}

.side-item-countdown.is-soon { color: var(--warning); }
.side-item-countdown.is-urgent { color: var(--loss); }

/* 最新市场：紧凑时间轴结构，分类色圆点 + 连接线 */
.side-item-timeline {
    position: relative;
    padding-left: 0.9rem;
}

.side-timeline-dot {
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.side-item-timeline:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 1.35rem;
    bottom: -0.25rem;
    width: 1px;
    background: var(--divider);
}

.side-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.5rem 0.4rem;
}

/* ==================== 市场详情页：交易条款提示 ====================
   放在交易面板主提交按钮下面，纯展示信息（不是勾选框），桌面端和手机版交易抽屉都显示 */
.sim-terms-note {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}

.sim-terms-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-secondary, #64748B);
    text-decoration: underline;
    cursor: pointer;
}

.sim-terms-link:hover {
    color: var(--text-primary);
}

/* ==================== 市场详情页：相关市场（桌面端右栏紧凑列表） ====================
   复用上面 .side-list/.side-item 这套首页"热门市场"已验证的视觉规则，这里只补充两样
   原来没有的元素：缩略图占位、Yes/No 价格列，不引入新的卡片/列表结构。嵌套在交易面板
   （#simPanel）内部、条款提示下方，不再单独做一张白色卡片，避免面板下方出现第二个
   抢眼的大卡片。默认隐藏——<1024px（含手机版交易抽屉）不显示这个模块，相关市场继续用
   左栏原有的 .detail-card 版本（#relatedMarketsCard），只在下面 1024px 断点里二选一
   切换显示。 */
.sim-related-desktop {
    display: none;
}

.sim-related-divider {
    border-top: 1px solid var(--border);
}

.sim-related-heading {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.related-market-item-thumb {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-muted);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-market-item-thumb svg {
    width: 16px;
    height: 16px;
}

.related-market-item-prices {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.related-market-item-prices .is-yes { color: var(--yes-text); }
.related-market-item-prices .is-no { color: var(--no-text); }

@media (min-width: 1024px) {
    /* ≥1024px：相关市场只显示交易面板下方这份紧凑版，左栏原位置的版本隐藏，
       避免同一份数据在桌面端重复出现两次 */
    #relatedMarketsCard {
        display: none;
    }

    .sim-related-desktop {
        display: block;
    }
}

.side-viewall-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--surface);
    color: var(--brand);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.15s;
}

.side-viewall-btn:hover {
    background-color: var(--brand-soft);
}

/* "查看更多"改成简洁文字链接（覆盖 .side-viewall-btn 共享的白底按钮框样式，
   那份共享样式继续原样保留给 #viewAllMarketsBtn 用，不受这里影响）：不再是大按钮框，
   紧贴在热门市场内容区域下方，margin-top 和左侧轮播圆点与轮播卡片之间的间距一致（12px），
   让"查看更多"和圆点落在同一条水平线上 */
.side-hot-viewmore-btn {
    display: block;
    width: 100%;
    /* .sidebar 本身对直接子元素有 gap:1rem(16px)，这里再叠加一个负值，让"查看更多"和
       上面热门市场内容区域之间的总间距落在 12px（和轮播圆点与轮播卡片的间距一致），
       不是单独的 12px + 16px 叠加 */
    margin-top: -0.25rem;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
    font-weight: 500;
    font-size: 0.85rem;
}

.side-hot-viewmore-btn:hover {
    background-color: transparent;
    text-decoration: underline;
}

/* 首页右侧本轮只保留"热门市场"一个窗口：即将结束/最新市场底层数据和渲染逻辑不变，
   只是不在首页展示。用 !important 是因为 renderLatestMarkets 会根据数据有无切换
   #latestMarketsModule 的内联 style.display，普通规则会被内联样式盖掉 */
.side-module-ending,
#latestMarketsModule {
    display: none !important;
}

/* ==================== 弹窗样式 ==================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background-color: white;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #1a1a1a;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

/* ==================== 使用条款弹窗（市场详情页） ====================
   复用通用 .modal/.modal-overlay/.modal-content/.modal-header/.modal-close/.modal-body，
   只用 .modal-terms 前缀覆盖尺寸/圆角/阴影这几项视觉属性（和 .modal-recharge 同一套做法），
   不改通用弹窗规则本身，不影响充值弹窗等其它复用方。 */
/* 手机版交易抽屉打开时 #simPanel/.mobile-trade-drawer-backdrop 会被提到 z-index 1800/1799
   （见下方 768px 断点），高于 .modal 基础规则的 1000；这个条款弹窗需要能从抽屉内部的
   《使用条款》链接打开，必须盖过抽屉本身，这里单独把它的 z-index 提到 2000，
   不改 .modal 基础规则，不影响充值弹窗等其它复用方 */
.modal-terms {
    z-index: 2000;
}

.modal-terms .modal-content {
    width: 90%;
    max-width: 780px;
    max-height: 78vh;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-elevated, 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08));
}

.modal-terms .modal-header {
    position: sticky;
    top: 0;
    background-color: var(--surface, #fff);
    z-index: 1;
}

.modal-terms .modal-header h2 {
    font-size: 1.05rem;
}

.terms-modal-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.terms-section {
    margin-bottom: 1.1rem;
}

.terms-section h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.terms-section p {
    margin: 0;
}

.terms-updated {
    margin: 1.25rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .modal-terms .modal-content {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: 80vh;
    }
}

/* ==================== 热门市场独立页面 /hot-markets.html ====================
   正常站内页面（不是弹窗）：白色页面背景，左侧一行一个市场的排行榜列表（分隔线代替
   卡片边框，接近正规平台排行榜），右侧固定筛选区域（搜索/排序/事件状态/清空筛选）。
   页面本身随内容自然滚动，列表内部不单独出现滚动条。筛选只作用于这个页面自己的
   状态（hotMarketsPage.state），不影响首页/分类页数据。
   .hot-modal-row 系列结构类沿用不变（原来是弹窗里的行样式，现在页面直接复用）。 */

.hot-page-header {
    margin-bottom: 1.5rem;
}

.hot-page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

.hot-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.hot-page-list-col {
    flex: 1 1 72%;
    min-width: 0;
}

.hot-page-list {
    display: flex;
    flex-direction: column;
}

.hot-page-filter-col {
    flex: 1 1 28%;
    max-width: 280px;
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.hot-page-clear-btn {
    width: 100%;
    padding: 0.6rem;
    background-color: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background-color 0.15s, color 0.15s;
}

.hot-page-clear-btn:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
}

@media (max-width: 760px) {
    .hot-page-layout {
        flex-direction: column;
    }

    .hot-page-filter-col {
        max-width: none;
        position: static;
    }
}

.hot-modal-row {
    display: grid;
    grid-template-columns: 44px 84px 1fr 96px 96px 84px 16px;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.4rem;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hot-modal-row:hover {
    background-color: var(--brand-soft);
}

.hot-modal-row-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex: none;
}

.hot-modal-row-category {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-modal-row-title {
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hot-modal-row-title a {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-modal-row-title a:hover {
    color: var(--brand);
}

.hot-modal-row-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: right;
}

.hot-modal-row-stat-label {
    font-size: 0.66rem;
    color: var(--text-muted);
}

.hot-modal-row-stat-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.hot-modal-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.hot-modal-row-side-pct {
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.hot-modal-row-side.is-yes .hot-modal-row-side-pct { color: #16A34A; }
.hot-modal-row-side.is-no .hot-modal-row-side-pct { color: #DC2626; }

.hot-modal-row-side-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.hot-modal-row-arrow {
    font-size: 1.2rem;
    color: var(--text-muted);
    text-align: center;
}

.hot-modal-loadmore-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem;
    background-color: var(--surface);
    color: var(--brand);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background-color 0.15s;
}

.hot-modal-loadmore-btn:hover {
    background-color: var(--brand-soft);
}

.hot-modal-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hot-modal-filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hot-modal-search-input,
.hot-modal-select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-primary);
    background-color: var(--surface);
}

.hot-modal-search-input:focus,
.hot-modal-select:focus {
    outline: none;
    border-color: var(--brand);
}

/* 热门市场页"标题搜索"输入框：聚焦改用稍深的中性灰（同时盖掉全站 input:focus-visible 的蓝色光圈），
   排序下拉框保持原样 */
.hot-modal-search-input:focus,
.hot-modal-search-input:focus-visible {
    border-color: #9CA3AF;
    box-shadow: none;
}

.hot-modal-status-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hot-modal-status-btn {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text-secondary, var(--text-primary));
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.hot-modal-status-btn:hover {
    background-color: var(--brand-soft);
}

.hot-modal-status-btn.is-active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

@media (max-width: 760px) {
    /* 窄屏放弃网格对齐，改成简单的自动换行：缩略图+标题+分类一行，两个统计值和方向
       百分比各自换行显示，箭头隐藏（整行本身仍可点击） */
    .hot-modal-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .hot-modal-row-thumb {
        width: 40px;
        height: 40px;
    }

    .hot-modal-row-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .hot-modal-row-side {
        order: 2;
        margin-left: auto;
        align-items: flex-end;
    }

    .hot-modal-row-category {
        order: 3;
        flex: 1 1 100%;
    }

    .hot-modal-row-stat {
        order: 4;
        text-align: left;
        flex-direction: row;
        gap: 0.3rem;
    }

    .hot-modal-row-arrow {
        display: none;
    }
}

/* ==================== 确认弹窗 ==================== */

.order-market-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.order-selection,
.order-amount {
    margin-bottom: 1rem;
}

.order-selection label,
.order-amount label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.selection-direction {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0.75rem;
    background-color: #f5f7fa;
    border-radius: 0.375rem;
    color: #2563eb;
}

.amount-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.amount-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    font-size: 1rem;
}

.amount-input:hover {
    border-color: #93c5fd;
}

.amount-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.amount-unit {
    font-size: 0.875rem;
    color: #666;
    white-space: nowrap;
}

.balance-check {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: #f5f7fa;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.balance-value {
    font-weight: 700;
    color: #2563eb;
}

.notice-box {
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.notice-box strong {
    color: #92400e;
}

.notice-box p {
    font-size: 0.8rem;
    color: #92400e;
    margin: 0.25rem 0 0 0;
}

/* ==================== 充值弹窗 ==================== */

.recharge-warning {
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.recharge-warning strong {
    color: #92400e;
}

.recharge-warning p {
    font-size: 0.8rem;
    color: #92400e;
    margin: 0.25rem 0 0 0;
}

.recharge-amount-select {
    margin-bottom: 1rem;
}

.recharge-amount-select label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.amount-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.amount-btn {
    padding: 0.75rem;
    background-color: #f0f7ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.amount-btn:hover {
    background-color: #bfdbfe;
}

.recharge-custom {
    margin-bottom: 1rem;
}

.recharge-custom label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.custom-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    font-size: 1rem;
}

.custom-input:hover {
    border-color: #93c5fd;
}

.custom-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.recharge-note {
    background-color: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: #1e40af;
}

/* ==================== 按钮样式 ==================== */

.btn-cancel,
.btn-confirm {
    height: 40px;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-cancel {
    background-color: var(--surface);
    border-color: #CBD5E1;
    color: #334155;
}

.btn-cancel:hover {
    background-color: var(--surface-muted);
    border-color: #93c5fd;
    color: var(--brand);
}

.btn-confirm {
    background-color: var(--brand);
    color: white;
}

.btn-confirm:hover {
    background-color: var(--brand-hover);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
    transform: translateY(-1px);
}

.btn-confirm:active {
    background-color: var(--brand-active);
    transform: translateY(0);
}

/* ====================================================================
   手机版第二批：充值弹窗（#rechargeModal，.modal-recharge）
   ====================================================================
   充值弹窗在首页/热门市场/详情页/我的预测/预测市场/我 六个页面共用同一份 DOM 和
   .modal/.modal-content/.modal-header/.modal-body/.modal-footer/.btn-cancel/
   .btn-confirm 等通用弹窗类名（预测确认弹窗 orderModal 等其它弹窗也在用这些类名）。
   这里全部加 .modal-recharge 前缀单独覆盖，不改通用弹窗规则本身、不影响 orderModal
   或市场详情页自己的其它弹窗；充值金额逻辑/快捷金额取值/自定义金额校验/确认/取消/
   充值请求/余额刷新完全不动，只调视觉尺寸。 ==================================================================== */
@media (max-width: 768px) {
    .modal-recharge .modal-content {
        width: calc(100% - 32px);
        border-radius: 16px;
    }

    .modal-recharge .modal-header,
    .modal-recharge .modal-body,
    .modal-recharge .modal-footer {
        padding: 16px;
    }

    .modal-recharge .recharge-warning {
        padding: 8px 12px;
        margin-bottom: 12px;
    }

    .modal-recharge .recharge-warning strong {
        font-size: 12px;
    }

    .modal-recharge .recharge-warning p {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 2px;
    }

    .modal-recharge .recharge-amount-select {
        margin-bottom: 12px;
    }

    .modal-recharge .recharge-amount-select label,
    .modal-recharge .recharge-custom label {
        margin-bottom: 8px;
    }

    .modal-recharge .recharge-custom {
        margin-bottom: 0;
    }

    /* 快捷金额按钮：高度从约 42px 压到 36px，继续保持 2x2 网格（4 个金额选项在
       弹窗宽度下这样排列已经合理，不强制改成单行 4 列） */
    .modal-recharge .amount-btn {
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-recharge .custom-input {
        height: 44px;
        padding: 0 12px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* 取消 + 确认改成同一行（通用 .modal-footer 在 ≤480px 会变成单列纵向堆叠，
       这里用更高优先级的 .modal-recharge 前缀改回两列一行，只影响充值弹窗） */
    .modal-recharge .modal-footer {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .modal-recharge .btn-cancel,
    .modal-recharge .btn-confirm {
        height: 48px;
        font-size: 15px;
        border-radius: 10px;
    }
}

/* ==================== 消息提示 ==================== */

.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: #1a1a1a;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==================== 响应式设计 ==================== */

@media (max-width: 1024px) {
    .main-content {
        /* minmax(0, 1fr) 而不是单纯 1fr：CSS Grid 的轨道默认按 minmax(auto, 1fr) 计算，
           "auto" 意味着轨道不会缩小到比里面内容的 min-content 更窄——如果某个子元素
           （比如图表 SVG）有较宽的固有最小内容宽度，单纯 1fr 会把整个网格撑宽出视口，
           导致移动端横向溢出。显式钳到 0 下限，让轨道始终能收缩到视口宽度以内。 */
        grid-template-columns: minmax(0, 1fr);
    }

    /* 移动端/窄屏：主推荐轮播三套模板统一改上下结构，右侧真实市场导航模块移到市场列表下方 */
    .sidebar {
        order: 1;
    }

    /* 单栏堆叠布局下不需要"两栏分隔线"，纵向分隔线只在桌面双栏并排时有意义 */
    .sidebar::before {
        display: none;
    }

    /* 移动端/窄屏：轮播改上下结构——上半是图片/标题/结果/摘要，下半是走势图 */
    .hero-slide {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .hero-chart-col {
        border-left: none;
        border-top: 1px solid var(--divider);
        padding: 1rem 1.25rem;
    }

    .hero-chart-col-head {
        padding-left: 0;
    }

    .hero-chart-plot-wrap {
        padding-left: 0;
        height: 180px;
        flex: none;
    }

    .hero-chart-xaxis {
        padding-left: 0;
    }

    .hero-left-col {
        padding: 1rem 1.25rem;
    }

    /* 箭头是桌面 hover 场景的辅助操作，堆叠布局下无法再精确纵向居中于整张卡片——
       窄屏统一隐藏箭头，改用圆点 + 手指滑动导航（滑动本来就是本轮的必做要求） */
    .hero-arrow {
        display: none;
    }

    .navbar-search {
        order: 3;
        width: 100%;
    }

    .category-list {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .navbar-container {
        flex-direction: column;
        gap: 0.75rem;
    }

    .navbar-logo h1 {
        font-size: 1.25rem;
    }

    .navbar-search {
        order: 2;
        width: 100%;
    }

    .navbar-right {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }

    /* 手机/平板窄屏：两个操作单元各占一整行——[持仓金额] / [余额金额][充值]，
       "我的预测""预测市场"已移入头像下拉菜单，不再在这里单独占一行 */
    .header-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    /* 手机端：还原成调整前的原始结构——白色资产栏（.header-assets-bar）、新增的图标/
       文案标签/分隔线全部不参与手机布局，.header-action-group 直接回到
       .header-actions 的纵向堆叠里，和资产栏调整前完全一致 */
    .header-assets-bar {
        display: contents;
    }

    .header-asset-divider,
    .header-asset-icon,
    .header-asset-label {
        display: none;
    }

    .header-asset-text {
        display: contents;
    }

    .header-action-group {
        width: 100%;
    }

    .header-amount-box,
    .header-recharge {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    /* 头像入口单独占一整行，靠右对齐，不被拉伸变形 */
    .header-user-menu {
        width: 100%;
        justify-content: flex-end;
    }

    .menu-toggle {
        display: flex;
        order: 1;
    }

    .markets-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .amount-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .toast {
        left: 12px;
        right: 12px;
        bottom: calc(var(--mobile-bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px);
        font-size: 13px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    /* 市场详情页手机版在底部导航之上还有一层固定的 Yes/No 交易栏（.mobile-trade-bar），
       Toast 需要再往上让出这层高度，否则会被交易栏盖住或紧贴着交易栏顶部显得很挤。
       --mobile-trade-bar-h 由 mobileTradeBar.js 实测真实高度写入，这里只是消费这个
       已经存在的变量做定位，不新增任何计算逻辑 */
    body.page-market-detail .toast {
        bottom: calc(var(--mobile-trade-bar-h, 70px) + var(--mobile-bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px);
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar-container {
        padding: 0 0.75rem;
    }

    .navbar-logo h1 {
        font-size: 1rem;
    }

    .search-input {
        font-size: 0.75rem;
        padding: 0.375rem;
    }

    /* 390px 这类窄屏：金额框宽度不够完整显示 $1,234.00 时，默认只显示"持仓"/"余额"短标签，
       点击金额框（见 ui.js 的 header-amount-expanded 开关）原地展开显示完整金额，
       不跳转、不影响我的预测/充值按钮本身的点击区域 */
    .header-amount-box .header-amount-full {
        display: none;
    }

    .header-amount-box .header-amount-mobile-label {
        display: inline-flex;
        font-size: 13px;
        font-weight: 600;
        color: #64748B;
    }

    .header-amount-box.header-amount-expanded .header-amount-full {
        display: inline-flex;
    }

    .header-amount-box.header-amount-expanded .header-amount-mobile-label {
        display: none;
    }

    .header-action-button {
        font-size: 0.8rem;
    }

    .category-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    /* 手机版第二批：首页左右边距 12px -> 16px（.main-container 只在 index.html 使用，
       不影响其它页面） */
    .main-container {
        padding: 1rem 1rem;
    }

    .hero-carousel {
        border-radius: 0.5rem;
    }

    .hero-left-col,
    .hero-chart-col {
        padding: 0.85rem 1rem;
    }

    .hero-main-title {
        font-size: 1.15rem;
    }

    .hero-thumb-wrap {
        width: 64px;
        height: 64px;
    }

    .hero-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-view-btn {
        width: 100%;
        text-align: center;
    }

    .btn-yes,
    .btn-no {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .markets-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .market-card {
        padding: 0.75rem 0.85rem;
    }

    .market-title {
        font-size: 0.875rem;
    }

    /* 移动端底部三列（流动性/交易量/市场热度）：宽度不够时缩小辅助文字和间距，
       但仍然强制三列保持同一行，不拆分成多行、不隐藏任何一项 */
    .market-stats-row {
        margin-top: 0.6rem;
    }

    .market-stats-col {
        gap: 0.1rem;
        padding: 0 0.3rem;
    }

    .market-stats-head {
        font-size: 0.6rem;
        gap: 0.15rem;
    }

    .market-stats-icon {
        font-size: 0.66rem;
    }

    .market-stats-value {
        font-size: 0.7rem;
    }

    .sidebar {
        gap: 0.75rem;
    }

    .side-module {
        padding: 1rem;
    }

    .sidebar h3 {
        font-size: 0.95rem;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }

    .modal-footer {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ==================== 辅助类 ==================== */

.hidden {
    display: none !important;
}

.loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* ==================== 市场详情页 v2：左侧详情 + 右侧预测面板 ==================== */

.detail-page-v2 {
    max-width: 1320px;
    /* 顶部图标+标题上方空白偏大：.detail-page-v2 只在 market-detail.html 用到（不影响
       共用 .detail-page 基础样式的 my-predictions/predictions/hot-markets 三个页面），
       这里单独把顶部留白从基础规则的 1.5rem(24px) 减半到 0.75rem(12px)，左右/底部
       留白不变，和下面 .market-header-card 自己 padding-top 减半是同一轮、同一个目的 */
    padding-top: 0.75rem;
}

.market-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.market-layout-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* 吸顶偏移量：实测 .site-top-fixed（导航栏+分类栏）在 1280px 下的真实渲染高度约 123px，
   这里取 124px 留一点余量，确保吸顶内容贴着网站顶部 Header 下边缘、不产生重叠也不留空隙。
   之前这里用的是 5.5rem(88px)，比真实高度小，滚动时会被 Header 压住一截，这次一并修正 */
.market-layout-right {
    position: sticky;
    top: 124px;
    /* position:sticky 会给这个子树建立独立的层叠上下文，"当前持仓"弹窗的遮罩层（z-index:1500）
       只在这个子树内部有意义，不加这行的话永远压不过 .site-top-fixed（z-index:100）的固定导航栏，
       导致点击导航栏区域关不掉弹窗。1024px 以下这里会变回 position:static，不建立层叠上下文，
       不受影响，不需要重复设置 */
    z-index: 150;
    /* 右侧标题改成单行省略（white-space: nowrap）后，这个网格项默认的 min-width: auto
       会按标题不换行时的完整宽度撑开整个网格列，导致长标题把整页顶出横向滚动条；
       显式设为 0 允许这一列缩小到网格实际分配的宽度，内部 .sim-market-title 的
       overflow: hidden + text-overflow: ellipsis 才会真正生效，而不是被撑开 */
    min-width: 0;
}

/* 市场标题核心区域吸顶（仅桌面端，见下方 1024px 断点关闭）：只保留"分类标签+市场图片+标题"，
   标签列表（detail-tags）已经搬到卡片外面单独一行，不计入吸顶内容，和右侧预测面板共用
   同一个 top 偏移量，两者贴齐。
   踩过的坑：sticky 曾经加在卡片内部一个更小的 wrapper 上，但 sticky 元素的"可粘性范围"
   受它自己父元素的盒子边界约束——如果父元素（这张卡片）本身很矮，卡片一滚出视口，
   内部的 sticky 子元素也跟着失效，起不到"滚动全程吸顶"的效果。所以这里改回直接把
   sticky 加在卡片本身（.market-header-card）上，让它的容器是整个左栏的滚动范围，
   同时把图片从 120px 缩小成 52px 小图标、标签搬出去，让卡片自身高度控制在 100px 左右，
   吸顶后只会短暂盖住走势图卡片自己的标题文字，不会盖到可交互的图表 Canvas */
.market-header-card {
    position: sticky;
    top: 124px;
    z-index: 10;
    /* 去框架化（本轮新增）：不再使用 .detail-card 的白底卡片/边框/圆角/阴影，标题区域
       直接融入页面背景。保留 var(--page-bg) 纯色背景（不是透明）是必须的——这张卡片是
       position:sticky，吸顶后仍然会盖住下面滚动上来的图表内容，透明会导致文字重叠，
       纯色背景正好和页面背景融为一体，视觉上不像卡片，但功能上继续正常遮挡 */
    background-color: var(--page-bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* 顶部标题区域连续缩小动画：--mh-progress 由 mobileMarketStickyHeader.js 按真实
       scrollY 逐帧写入（0~1，不用 CSS transition，直接是 scrollY→视觉状态的映射，
       避免和滚动之间出现额外延迟）。左右内边距固定 1.5rem 不随滚动变化（和下方仍然
       保留卡片框架的市场规则卡对齐），图片/标题/分类标签的插值见各自规则，共用同一个
       变量，保持同步。
       本轮：图标+标题上方的空白区域偏大，只把 padding-top 的基准值和收紧幅度各减半
       （1.5rem→0.75rem，收紧幅度 0.75rem→0.375rem，吸顶后仍然连续收紧到 0.375rem，
       和原来"收紧到 0.75rem"保持同一个比例关系，缩放曲线/触发逻辑不变）；padding-bottom
       保持原样不变，不影响标题区域下方的间距，也不影响图标和标题在这一行内部的相对
       位置（两者仍然是同一个 flex 行内 align-items:center，只是整行往上贴近一些） */
    padding-top: calc(0.75rem - (var(--mh-progress, 0) * 0.375rem));
    padding-bottom: calc(1.5rem - (var(--mh-progress, 0) * 0.75rem));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* 标题核心行：图标在左，分类+标题堆叠在图标右侧，收藏/分享按钮在最右侧——
   替代原来"分类单独一行在图标上方"的布局（原 .market-header-title-row，只包裹图标+
   标题两个子元素）。这是本轮唯一的结构调整，图标/标题本身的缩放插值规则不变，只是
   分类标签现在是这一行内、标题上方的一个子元素，不再是卡片里单独的一整行 */
.market-header-main {
    display: flex;
    align-items: center;
    gap: calc(0.75rem - (var(--mh-progress, 0) * 0.25rem));
}

.market-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 分类标签淡出后，标题靠这个 justify-content:center 自动保持在图标（随滚动连续
       缩小）的垂直中间，不需要额外用 JS 计算偏移量，也不会出现"标题突然跳一下"——
       纯 CSS flex 对齐，每一帧都和图标的真实当前高度重新对齐 */
    justify-content: center;
    min-height: 0;
}

.market-header-card h1 {
    font-size: calc(1.75rem - (var(--mh-progress, 0) * 0.45rem));
    line-height: 1.3;
    margin: 0;
    /* 本轮：标题强制单行显示，不再允许自动换行到第二行。真正的"超出宽度就省略"由
       JS（marketDetail.js setDetailTitleWithEllipsis）在赋值前用 canvas 量出可用宽度后
       算好中间省略文本再写入，这里的 white-space/overflow 只是兜底防止任何未被 JS
       覆盖到的边界情况（比如 JS 还没执行完）也不会把布局撑开、挤压右侧收藏/分享按钮 */
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.market-header-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: none;
}

.market-header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.market-header-icon-btn svg {
    width: 1.1rem;
    height: 1.1rem;
}

.market-header-icon-btn:hover {
    color: var(--brand);
    background-color: var(--surface-muted);
}

.market-header-icon-btn.is-favorited {
    color: var(--brand);
}

.market-header-icon-btn.is-favorited svg {
    fill: currentColor;
}

/* 旧的 Yes/No 概率大卡片 + 成交量/结束时间/市场状态/流动性/市场热度五项小卡片：
   这些数据已经分别在走势图控制栏（Yes/No 价格）和走势图下方摘要栏（其余五项）里展示，
   这里用 display:none 整体隐藏、不占用任何高度；DOM 节点本身保留不删除，
   marketDetail.js 里写入这些节点的数据更新逻辑（quickYesPercent/quickVolume/
   quickCloseTime/quickStatus/quickLiquidity/quickMarketHeat 等）完全不用改，
   display:none 只影响渲染/布局，不影响 JS 对隐藏节点 textContent 的读写，
   chartSummaryBar 的 syncChartSummary() 镜像逻辑因此不受任何影响，继续正常同步 */
.market-quickstats {
    display: none;
}

.quickstat-prob {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.quickstat-prob-item {
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    text-align: center;
}

.quickstat-prob-yes {
    background-color: var(--yes-bg);
    border: 1px solid var(--yes-border);
}

.quickstat-prob-no {
    background-color: var(--no-bg);
    border: 1px solid var(--no-border);
}

.quickstat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.quickstat-prob-item strong {
    font-size: 1.5rem;
}

.quickstat-prob-yes strong {
    color: var(--yes-text);
}

.quickstat-prob-no strong {
    color: var(--no-text);
}

.quickstat-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.quickstat-meta-item {
    background-color: #f8fafc;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.quickstat-meta-item strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: #111827;
}

/* ---------- 订单簿 ---------- */

.orderbook-card {
    /* 去框架化：不用卡片白底/边框/圆角/阴影，直接融入页面背景。原来和上方图表区域
       之间用一条极淡横线分隔，本轮按要求把这条分隔线也删掉（border-top 改成 none），
       折叠/展开逻辑、订单簿数据、背景色/圆角/间距均不受影响 */
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.orderbook-card h2 {
    margin-bottom: 1rem;
}

/* ---------- 订单簿可折叠（桌面+手机通用） ----------
   h2 本身是点击入口（mobileMarketDetailUI.js 绑定，不新增按钮元素），箭头用 ::after
   伪元素画，不新增 DOM。折叠/展开只控制 #orderbookCollapsible 这一个包装容器的
   max-height，不碰订单簿数据/CLOB/买卖逻辑——.orderbook-tab 的 active 状态、
   #orderbookRows 的内容在折叠期间照常在后台更新，展开的瞬间看到的就是最新数据，
   不需要重新加载。
   默认折叠：.orderbook-card 在 HTML 里已经直接带 is-collapsed 类（即使 JS 还没执行，
   也已经是收起状态，不会有"先展开一下又收起"的闪烁）。 */
#orderbookToggleHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    /* 订单簿收起状态做成圆角可点击卡片：整行（文字+箭头）本来就是同一个点击入口
       （mobileMarketDetailUI.js 绑定在这个元素本身），这里让它看起来也是一张卡片——
       不加阴影、不加重边框。
       .orderbook-card 自己通过 class="detail-card orderbook-card" 继承了 .detail-card
       的 1.5rem 内边距（展开后订单簿内容就是靠这圈内边距和上下文对齐的，不能动），
       所以这里用等量的负 margin 把卡片背景"顶"出去，让圆角卡片的外边缘正好对齐
       .orderbook-card 的边框盒（和上面 .chart-card、下面 .market-rules-card 左右对齐），
       再用相同数值的 padding 把文字/箭头的视觉位置拉回原来的地方，文字位置不变，
       只有背景范围变宽。
       本轮：默认背景从"和页面背景完全相同"改成 var(--divider)（#EEF1F5，比
       var(--page-bg) #F5F7FB 略深、仍然很浅），让卡片在不 hover 时也能被肉眼看出来；
       hover 继续用比默认更深一级的 var(--border)，两级灰度递进，风格依旧轻量简洁 */
    margin: 0 -1.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md, 12px);
    background-color: var(--divider, #EEF1F5);
    transition: background-color 0.15s ease;
}

#orderbookToggleHeader:hover {
    background-color: var(--border, #E5EAF2);
}

/* 默认（折叠态）箭头指向下方 ▼，用户点击展开后旋转 180° 变成指向上方 ▲，
   和折叠态的视觉含义相反过来，符合"收起=向下，展开=向上"的直觉 */
#orderbookToggleHeader::after {
    content: '⌄';
    font-size: 1.1rem;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.2s ease;
}

.orderbook-card:not(.is-collapsed) #orderbookToggleHeader::after {
    transform: rotate(180deg);
}

.orderbook-card.is-collapsed #orderbookToggleHeader {
    margin-bottom: 0;
}

/* 展开/收起的平滑动画：用一个包装容器统一做 max-height 过渡（而不是给四个子元素各自
   加 display:none/block，那样没有动画、会突然闪现）。具体展开到的高度由
   mobileMarketDetailUI.js 用 scrollHeight 实时测量后写成内联 max-height 触发过渡，
   这里的 CSS 只负责默认收起态（max-height:0）和过渡时长/缓动 */
.orderbook-collapsible {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

.orderbook-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.orderbook-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: #f8fafc;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.orderbook-tab.active {
    background-color: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

.orderbook-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: #9ca3af;
    border-bottom: 1px solid #f3f4f6;
}

.orderbook-rows {
    max-height: 320px;
    overflow-y: auto;
}

.orderbook-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.orderbook-row-ask {
    color: var(--loss);
    background-color: rgba(254, 226, 226, 0.35);
}

.orderbook-row-bid {
    color: var(--profit);
    background-color: rgba(209, 250, 229, 0.35);
}

/* 2026-10 订单簿点击联动：价格/份额两格可点击（"总计"列不可点击）。负 margin 抵消 padding，
   文字位置和行高保持不变；只有 hover / 键盘焦点 / 点击后短暂高亮三种反馈 */
.orderbook-fill {
    justify-self: start;
    margin: -0.1rem -0.3rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s;
}

.orderbook-fill:hover {
    background-color: rgba(15, 23, 42, 0.07);
}

.orderbook-fill:focus-visible {
    outline: 2px solid var(--brand, #2563eb);
    outline-offset: 0;
}

@keyframes orderbook-row-picked-fade {
    from { background-color: rgba(37, 99, 235, 0.16); }
    to { background-color: transparent; }
}

.orderbook-row.orderbook-row-picked {
    animation: orderbook-row-picked-fade 0.7s ease-out;
}

.orderbook-empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.orderbook-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--divider);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.orderbook-footer strong {
    color: var(--text-number);
}

/* ---------- 预测提交面板 ---------- */

.sim-panel {
    /* 本轮只改背景色，让交易面板和详情页整体背景统一，不再是单独凸出的白色板块；
       圆角/边框/阴影/间距/布局/按钮/文字/功能一律不变 */
    background-color: var(--page-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    /* 面板内部各区块（标题/买卖切换/价格选择/份额/快捷金额/持仓周期/预计结果/确认按钮）
       之间统一用这一个 gap 值控制间距，本轮只是整体从 0.85rem 轻微收紧到 0.65rem，
       让纵向排布更紧凑，不改变任何一个子元素本身的内容或逻辑 */
    gap: 0.65rem;
    /* 提交结果弹窗（.sim-result-modal-overlay）用 position:absolute 挂在这个面板内部，
       这里的 position:relative 是它的定位基准，不受 .market-layout-right 在窄屏下从
       sticky 变回 static 的影响（面板自身的 position 不跟着那个媒体查询变化），
       同时纯 relative 定位不带偏移量，不影响原有 flex 布局的任何一个子元素 */
    position: relative;
}

.sim-panel-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* 右侧下单面板顶部市场信息区：图片在最左侧、垂直方向覆盖右边"标题行 + 方向行"两行文字，
   最右侧是常驻"当前份额"。图片和左侧 #detailMarketImage 是同一个市场对象、同一个 image
   字段，不新增第二套市场数据源。 */
.sim-market-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
}

.sim-market-summary-image {
    width: 58px;
    height: 58px;
    max-width: 58px;
    max-height: 58px;
    border-radius: 0.625rem;
    object-fit: cover;
    flex-shrink: 0;
}

/* 标题行 + 方向行纵向排列，整体在图片高度范围内垂直居中 */
.sim-market-summary-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* 标题改成中灰色，和页面整体更协调，不再用深黑色；单行 + CSS 自动省略不变，
   短标题能放下就完整显示，只有真正超出容器宽度的长标题才会出现"…" */
.sim-market-summary-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #6b7280;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 方向行只显示 Yes/No 本身（不再有"当前选择："前缀），字号比标题略小，颜色和 Yes/No
   大按钮的选中配色（var(--profit) / var(--loss)）保持一致，一眼能对应上 */
.sim-market-summary-outcome {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
}

.sim-market-summary-outcome-yes {
    color: var(--profit);
}

.sim-market-summary-outcome-no {
    color: var(--loss);
}

/* 买入/卖出 + 常驻"当前份额" + "查看"轻量入口，同一行：tabs 在左，当前份额靠 margin-left:auto
   顶到中间偏右，"查看"跟在当前份额右边、贴着行的最右端 */
.sim-trade-header-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid #e5e7eb;
    min-width: 0;
}

/* 右侧"当前份额 + 查看"整体隐藏：只是不显示，元素还在 DOM 里，
   updateCurrentPositionStat() 照常运行、持仓数据/接口一个字没动 */
#simCurrentPositionStat,
#simMoreEntryBtn {
    display: none;
}

/* 腾出来的位置交给订单类型紧凑下拉，贴到这一行最右侧 */
.sim-order-type-compact {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.sim-order-type-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.1rem;
    cursor: pointer;
    white-space: nowrap;
}

.sim-order-type-trigger:hover {
    color: #111827;
}

.sim-order-type-caret {
    color: #9ca3af;
    font-size: 0.7rem;
    transition: transform 0.15s;
}

.sim-order-type-trigger[aria-expanded="true"] .sim-order-type-caret {
    transform: rotate(180deg);
}

.sim-order-type-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 20;
    min-width: 92px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 0.3rem;
    list-style: none;
    margin: 0;
}

.sim-order-type-option {
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sim-order-type-option:hover {
    background-color: #f3f4f6;
}

.sim-order-type-option.active {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.sim-trade-header-row .sim-side-tabs {
    border-bottom: none;
    flex-shrink: 0;
}

/* 常驻"当前份额"：这一行里视觉最醒目的信息，比"查看"明显更突出。数据来源和计算逻辑
   完全不变（updateCurrentPositionStat / computeCurrentPositionStat 未改一行），
   本轮只是把它从顶部市场信息区挪到这一行，并放大字号强化视觉层级。
   份额数字不允许被省略号截断：这里不用 overflow:hidden + text-overflow:ellipsis，
   改用 flex-wrap——空间不够时"标签+数字"和"百分比"作为两个整体自然换到第二行，
   数字本身永远完整显示，不产生横向溢出 */
.sim-current-position-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.05rem;
    column-gap: 0.4rem;
    min-width: 0;
    margin-left: auto;
}

.sim-current-position-label {
    font-size: 0.75rem;
    color: #9ca3af;
    flex-shrink: 0;
    white-space: nowrap;
}

.sim-current-position-shares {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sim-current-position-pnl {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "查看"：轻量辅助入口，刻意弱化（小号浅灰文字，无背景无边框），不抢当前份额的视觉重心 */
.sim-more-entry {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.2rem 0.1rem;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.sim-more-entry:hover {
    color: #6b7280;
}

/* 持仓/待成交数量 > 0，或存在未读结算结果时才显示，不影响这一行的布局（绝对不占位，
   是行内一个 7px 小圆点） */
.sim-more-entry-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background-color: #ef4444;
    flex-shrink: 0;
}

/* "查看详情"小弹窗：独立浮层，挂载在 body 顶层（见 market-detail.html），不在下单面板内部
   向下展开，不受任何祖先容器 overflow 裁剪。桌面端固定宽度、居中显示，高度由三行内容
   自然撑开；只是一个轻量入口菜单，不在这里显示任何一笔持仓/订单/历史的真实详情 */
.sim-more-modal-backdrop {
    position: fixed;
    inset: 0;
    /* 统一到和其它弹窗一样的遮罩深浅（原来是 0.45，比其它弹窗深一些），加同样的轻微模糊 */
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1600;
}

.sim-more-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: calc(100vw - 32px);
    background-color: #FFFFFF;
    border: 1px solid var(--modal-surface-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    z-index: 1601;
    overflow: hidden;
}

.sim-more-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--divider);
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

.sim-more-modal-body {
    display: flex;
    flex-direction: column;
}

.sim-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    background-color: #f3f4f6;
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.sim-tab,
.sim-type-tab {
    border: none;
    background: transparent;
    padding: 0.5rem;
    border-radius: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}

.sim-tab.active,
.sim-type-tab.active {
    background-color: white;
    color: #111827;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

/* 买入 / 卖出：像真实交易面板一样用下划线 Tab，紧凑、明确区分激活态 */
.sim-tabs.sim-side-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 1.5rem;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid #e5e7eb;
}

.sim-side-tabs .sim-tab {
    flex: none;
    padding: 0.5rem 0.1rem 0.6rem;
    border-radius: 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: #9ca3af;
    font-size: 0.9rem;
}

.sim-side-tabs .sim-tab:hover {
    color: #4b5563;
}

.sim-side-tabs .sim-tab.active {
    background-color: transparent;
    box-shadow: none;
    color: #111827;
    border-bottom-color: #111827;
}

/* "查看详情"小弹窗里的三行：持仓 / 待成交 / 历史记录，点击后关闭这个小弹窗、
   再打开修改前已有的完整弹窗（业务逻辑不在这里，见 marketDetail.js） */
.sim-more-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background-color: white;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    color: #4b5563;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

.sim-more-modal-body .sim-more-row:last-child {
    border-bottom: none;
}

.sim-more-row:hover {
    background-color: #f9fafb;
}

.sim-more-row-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sim-more-row-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

/* 数量大于 0 时用现有亏损红色变量强调，等于 0 时保持上面的默认灰色，
   不加圆形背景、不做成角标，只改数字本身的颜色和字重 */
.sim-more-row-count-active {
    color: var(--loss);
    font-weight: 700;
}

.sim-more-row-arrow {
    font-size: 0.85rem;
    color: #cbd5e1;
}

/* "历史"弹窗比默认的持仓/待成交弹窗略宽一些，容纳筛选栏和更多字段 */
.sim-history-popover {
    width: 420px;
}

.sim-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.6rem 0.9rem 0;
}

.sim-history-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
}

.sim-history-filter-btn:hover {
    background-color: #f3f4f6;
}

.sim-history-filter-btn.active {
    background-color: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

.sim-history-filter-count {
    font-size: 0.68rem;
    font-weight: 700;
}

/* 每个筛选按钮自己数量的颜色语义：全部=深灰，已成交=绿色，已取消=灰色，已卖出=蓝色，已结算=深紫色，
   和盈亏颜色（绿=盈利/红=亏损）分开，不共用同一套颜色含义 */
.sim-history-filter-btn[data-filter="all"] .sim-history-filter-count {
    color: #374151;
}

.sim-history-filter-btn[data-filter="filled"] .sim-history-filter-count {
    color: #16a34a;
}

.sim-history-filter-btn[data-filter="cancelled"] .sim-history-filter-count {
    color: #9ca3af;
}

.sim-history-filter-btn[data-filter="sold"] .sim-history-filter-count {
    color: #2563eb;
}

.sim-history-filter-btn[data-filter="settled"] .sim-history-filter-count {
    color: #6d28d9;
}

/* 卖出模式下的真实可卖份额提示 */
.sim-sellable-info {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    color: #1d4ed8;
    font-weight: 600;
}

.sim-sellable-empty {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}

.sim-sellable-empty p {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.sim-sellable-view-pending {
    border: 1px solid #bfdbfe;
    background-color: #eff6ff;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.sim-sellable-view-pending:hover {
    background-color: #dbeafe;
}

/* 遮罩层：点击外部关闭弹窗用。原来是透明的，完全看不出弹窗浮在页面上方；
   现在统一改成和限价/市价结果弹窗一样的深灰蓝半透明 + 轻微背景模糊，让持仓/待成交/历史
   这三个弹窗和其它弹窗视觉上属于同一套系统。点击遮罩关闭的行为不变，事件绑定没有改 */
.sim-positions-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1500;
}

/* 桌面端：这三个弹窗现在挂载在 body 顶层（不再嵌套在触发按钮的 anchor 里），
   改成固定定位 + 视口居中，不再依赖某个祖先按钮的 position:relative，
   也就不会再被下单面板任何容器的 overflow 裁剪 */
.sim-positions-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 2rem);
    background-color: #FFFFFF;
    border: 1px solid var(--modal-surface-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    z-index: 1501;
    overflow: hidden;
}

.sim-positions-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--divider);
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

.sim-positions-close {
    border: none;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    margin: -0.15rem -0.25rem -0.15rem 0;
    border-radius: 0.4rem;
}

.sim-positions-close:hover {
    color: #374151;
    background-color: #f3f4f6;
}

.sim-positions-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.5rem 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 阶段 7：一条独立持仓批次的卡片——顶部一行（方向/状态/盈亏），中间一个小字段网格
   （投入/成交价/当前价格/成交时间/到期时间/剩余时间），底部"查看详情" */
.sim-position-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    /* 原来是浅灰底、几乎没有边框对比，卡片和弹窗背景融在一起分不清；改成白底+浅灰边框+
       很轻的阴影，让每一条持仓/待成交/历史记录看起来是独立的卡片，鼠标经过再轻微提升 */
    background-color: #FFFFFF;
    border-radius: var(--modal-card-radius);
    border: 1px solid var(--modal-card-border);
    box-shadow: var(--modal-card-shadow);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sim-position-row:hover {
    border-color: #CBD5E1;
    box-shadow: var(--modal-card-shadow-hover);
}

.sim-position-row-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sim-position-status-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    /* 统一改成圆角 pill（原来是 0.3rem 小圆角矩形） */
    border-radius: 999px;
    white-space: nowrap;
}

/* 普通信息/持仓中：蓝色 */
.sim-position-status-open {
    background-color: var(--brand-soft);
    color: var(--brand);
}

/* 等待成交/撮合中：橙色 */
.sim-position-status-pending {
    background-color: #FEF3C7;
    color: var(--warning);
}

/* 部分成交：比"等待成交"深一档的橙黄色，不用绿色，避免被当成已成交 */
.sim-position-status-partial {
    background-color: #FDE68A;
    color: #B45309;
}

/* 已结算：深蓝色，和"已卖出"的普通蓝区分开 */
.sim-position-status-settled {
    background-color: #DBEAFE;
    color: var(--brand-active);
}

/* 已取消/已到期：灰色（原来这个 class 在 JS 里已经在用，但一直没有对应的 CSS 规则，
   实际显示是无样式的默认外观，这里补上） */
.sim-position-status-cancelled {
    background-color: #F1F5F9;
    color: var(--text-secondary);
}

.sim-position-status-error {
    background-color: var(--loss-soft);
    color: var(--loss);
}

.sim-position-row-top .sim-position-pnl {
    margin-left: auto;
}

.sim-position-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem 0.5rem;
}

.sim-position-field {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.sim-position-field span {
    font-size: 0.66rem;
    color: #9ca3af;
    white-space: nowrap;
}

.sim-position-field strong {
    font-size: 0.75rem;
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim-position-row-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sim-position-outcome-tag {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
}

.sim-position-outcome-yes {
    background-color: var(--yes-bg);
    color: var(--yes-text);
}

.sim-position-outcome-no {
    background-color: var(--no-bg);
    color: var(--no-text);
}

.sim-position-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sim-position-invested {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sim-position-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.sim-position-row-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sim-position-pnl {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.sim-position-pnl-positive {
    color: var(--profit);
}

.sim-position-pnl-negative {
    color: var(--loss);
}

.sim-position-pnl-flat {
    color: var(--text-secondary);
}

.sim-position-detail-link {
    align-self: flex-end;
    font-size: 0.75rem;
    color: #2563eb;
    font-weight: 600;
    white-space: nowrap;
}

.sim-position-detail-link:hover {
    text-decoration: underline;
}

.sim-positions-empty {
    padding: 1rem 0.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.82rem;
}

/* "持仓"弹窗：Yes/No 分开的汇总卡片，取代原来直接铺开的单笔批次列表 */
.sim-position-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
    background-color: #FFFFFF;
    border-radius: var(--modal-card-radius);
    border: 1px solid var(--modal-card-border);
    box-shadow: var(--modal-card-shadow);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sim-position-summary-card:hover {
    border-color: #CBD5E1;
    box-shadow: var(--modal-card-shadow-hover);
}

.sim-position-summary-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.sim-position-sell-btn {
    border: 1px solid #fecaca;
    background-color: white;
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.sim-position-sell-btn:hover {
    background-color: #fef2f2;
}

.sim-position-detail-toggle {
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.sim-position-detail-toggle:hover {
    background-color: #f8fafc;
}

.sim-position-lot-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #e5e7eb;
}

/* "待成交"弹窗的取消按钮 */
.sim-position-cancel-btn {
    align-self: flex-end;
    border: 1px solid #fecaca;
    background-color: white;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.sim-position-cancel-btn:hover {
    background-color: #fef2f2;
}

.sim-position-cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 390px 手机端：改成底部抽屉，宽度贴合屏幕，不横向溢出 */
@media (max-width: 480px) {
    .sim-positions-popover {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        /* 桌面端基础规则里的 translate(-50%, -50%) 会跟着继承过来，这里必须显式取消，
           否则底部抽屉会被那个位移顶偏，不再贴着屏幕底边 */
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
    }

    .sim-positions-list {
        max-height: calc(70vh - 48px);
    }

    /* "查看详情"小弹窗手机端建议宽度 */
    .sim-more-modal {
        width: calc(100vw - 32px);
    }
}

/* 市价 / 限价：紧凑分段按钮，选中项明显、未选中项弱化 */
.sim-tabs.sim-type-tabs {
    display: inline-flex;
    grid-template-columns: none;
    width: auto;
    gap: 0.2rem;
    background-color: #f1f5f9;
    padding: 0.2rem;
    border-radius: 999px;
}

.sim-type-tabs .sim-type-tab {
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #6b7280;
}

.sim-type-tabs .sim-type-tab.active {
    background-color: #111827;
    color: white;
    box-shadow: none;
}

.sim-outcome-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.sim-outcome-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid #e5e7eb;
    /* 2026-10 按截图改版：未选中统一白底 + 浅灰边框 + 灰字（价格数字继承同一颜色），
       边框宽度仍是 1px，按钮尺寸不变 */
    background-color: #ffffff;
    color: #919396;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sim-outcome-btn:not(.active):hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #6b7280;
}

.sim-outcome-btn strong {
    font-size: 1rem;
}

/* 2026-10 交易面板 Yes/No 视觉瘦身：选中态从"实心深绿/深红 + 白字 + 发光描边"
   改成"浅色底 + 深色字 + 细边框"，和上两轮市场卡片 Yes/No 按钮、首页卡片按钮用的
   是同一套 --profit-soft/--loss-soft 淡色 token，全站配色语言统一。颜色含义
   （绿=Yes/红=No）、selectOutcome() 点击逻辑、class 名、未选中置灰态都不变 */
/* 用户反馈：上一轮淡色版本太浅了，背景颜色在原淡色 token 基础上加深约 30%，
   边框跟着同步加深，文字颜色不变，仍然不是实心深色块 */
.sim-outcome-yes.active {
    background-color: #2E7D32;
    border-color: #2E7D32;
    color: #ffffff;
}

.sim-outcome-no.active {
    background-color: #D32F2F;
    border-color: #D32F2F;
    color: #ffffff;
}

/* 2026-10 按截图：选中态改为实心深绿「是」/ 鲜红「否」+ 白字；
   「是/否」文字略带透明，价格数字纯白加粗，和截图一致。复用现有 .active 选中状态 */
.sim-outcome-btn.active > span {
    color: rgba(255, 255, 255, 0.78);
}

/* 原来占一整行的市价/限价大切换条整体隐藏：入口已经搬到顶部 .sim-order-type-compact
   紧凑下拉，这里只是不显示，#simTypeTabs 里的按钮、data-type、事件绑定原样保留在 DOM 里，
   selectOrderType() 继续正常读写它们，不是被删除、也不是第二套市价/限价逻辑 */
.sim-order-type {
    display: none;
}

.sim-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.sim-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sim-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.sim-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
}

.sim-step-btn {
    border: none;
    background-color: #f3f4f6;
    color: #374151;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.sim-step-btn:hover {
    background-color: #e5e7eb;
}

.sim-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.55rem 0.5rem;
    font-size: 0.95rem;
    text-align: center;
    color: #111827;
}

.sim-input:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
}

.sim-input-suffix {
    padding: 0 0.75rem;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* 金额/份额大输入行：左侧小号灰色标签，右侧大号数字输入框，风格参考成熟交易类 App
   （截图参考），比原来更宽、更醒目，方便用户一眼确认投入金额或卖出份额 */
.sim-trade-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e5e7eb;
    min-width: 0;
    /* 纯体验提示：鼠标悬停这一整行时显示文字输入光标样式，呼应"点这一整条都能输入"
       的真实点击行为（见 marketDetail.js 的点击代理），不新增边框/背景等视觉元素 */
    cursor: text;
}

.sim-trade-input-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    flex-shrink: 0;
}

/* "$" 和输入框必须是一个紧凑的整体，不能被拉开：这里不再用 justify-content 或
   flex:1 让 input 撑满剩余空间（那样会导致文字右对齐、"$" 贴左，中间出现大空档）。
   改成不参与伸缩的 inline-flex 小组件，整体靠 margin-left: auto 贴到这一行最右侧，
   input 自身宽度由 JS 按内容长度动态设置（见 updateSharesInputVisualState），
   这样 "$" 和数字第一位永远紧挨着，不管数字有多短或多长 */
.sim-trade-input-control {
    display: inline-flex;
    align-items: baseline;
    /* "$" 和数字之间的固定间距，不随数字长度或是否有小数点变化——input 自身宽度由 JS
       按实际文本像素宽度精确测量设置（见 updateSharesInputVisualState），不再靠 input
       内部空白撑距离，所以这里的 gap 就是两者之间唯一、恒定的间距来源 */
    gap: 3px;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
}

/* "$"只是视觉前缀，和 input 是两个独立的 DOM 节点，不会被写进 input.value，
   买入·市价才显示（由 updateSharesFieldLabel 控制），其余三种组合永远隐藏。
   颜色只跟随"是否有值"这一个状态：默认（.is-empty）浅灰，输入大于 0（.has-value）深色，
   和是否获得焦点完全无关 */
.sim-input-prefix {
    /* 字号必须和数字完全一致（原来 1.5rem 比数字的 2rem 小一号，看起来像两个不同大小的
       元素拼在一起），现在和 .sim-input-shares 用同一个 2rem，视觉上才是真正的一个整体 */
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #9ca3af;
    flex-shrink: 0;
    margin-right: 0;
}

.sim-input-prefix.has-value {
    color: #111827;
}

.sim-input-shares {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0.2rem 0;
    margin: 0;
    text-align: right;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    flex-shrink: 1;
    min-width: 1.2ch;
    max-width: 100%;
    /* 初始宽度，JS 会在每次数值变化时按内容长度重新设置，让 "$" 和数字贴在一起 */
    width: 1.6ch;
    /* 去掉原生表单控件的默认外观（含部分浏览器聚焦时自带的内部描边/高亮），
       不改变 type="number" 本身的校验和键盘输入行为，只是纯视觉 */
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

.sim-input-shares.has-value {
    color: #111827;
}

.sim-input-shares::-webkit-outer-spin-button,
.sim-input-shares::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 聚焦时不允许出现任何内部小框：不显示边框、outline、box-shadow 或单独的背景色块。
   外层整个下单面板卡片本身的边框和聚焦效果不受影响，这里只管这一个 input 自己 */
.sim-input-shares:focus,
.sim-input-shares:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.sim-input-shares::placeholder {
    color: #d1d5db;
}

.sim-quick-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.sim-quick-btn {
    padding: 0.4rem 0.25rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.sim-quick-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.sim-quick-btn:active {
    background-color: #e5e7eb;
}

.sim-select {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: #111827;
    background-color: white;
}

/* ---------- 过期时间下拉菜单 ---------- */

/* "持仓周期"标题和下拉框合并成一行：只覆盖 #simExpiryField 这一个字段的排列方向，
   不改共享的 .sim-field 基础规则（.sim-field 同时也用在 #simPriceField 限价输入框上，
   那里必须继续保持原来的上下排列，不受这里影响）。DOM 结构本身已经是 label 紧跟着
   .sim-expiry-dropdown 两个直接子元素，不需要改动 HTML，纯 CSS 就能让它们同一行 */
#simExpiryField {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

#simExpiryField label {
    flex-shrink: 0;
    white-space: nowrap;
}

.sim-expiry-dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
}

.sim-expiry-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    background-color: white;
    cursor: pointer;
    transition: all 0.15s;
}

.sim-expiry-trigger:hover {
    border-color: #9ca3af;
    background-color: #f9fafb;
}

.sim-expiry-trigger[aria-expanded="true"] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.sim-expiry-caret {
    color: #9ca3af;
    font-size: 0.75rem;
    transition: transform 0.15s;
}

.sim-expiry-trigger[aria-expanded="true"] .sim-expiry-caret {
    transform: rotate(180deg);
}

.sim-expiry-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 0.4rem;
    list-style: none;
    margin: 0;
    /* 最多 6 个选项在窄屏（375×812 一类）下可能超出视口底部、甚至盖住提交按钮，
       这里始终限制最大高度并允许内部滚动；具体数值由 marketDetail.js 的
       positionExpiryMenu() 按实际可用空间实时写入 style.maxHeight（见那里的注释），
       这个基础值只是 JS 还没来得及计算时的兜底，不影响任何选项数据/选中逻辑 */
    max-height: 240px;
    overflow-y: auto;
}

/* 下方空间不够、上方空间更充足时，由 positionExpiryMenu() 加上这个 class 改成向上展开，
   纯定位调整，不改变菜单内容或选中逻辑 */
.sim-expiry-menu.sim-expiry-menu--upward {
    top: auto;
    bottom: calc(100% + 0.4rem);
}

.sim-expiry-option {
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sim-expiry-option:hover {
    background-color: #f3f4f6;
}

.sim-expiry-option.active {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.sim-expiry-custom {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.sim-expiry-custom-input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: #111827;
}

.sim-expiry-confirm-btn {
    padding: 0.5rem 0.9rem;
    border-radius: 0.4rem;
    border: 1px solid #2563eb;
    background-color: #2563eb;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
    flex-shrink: 0;
}

.sim-expiry-confirm-btn:hover {
    background-color: #1d4ed8;
}

/* 预计结果摘要：瘦身成紧凑型数据摘要区（只压缩字号/行距/内边距，三行内容、计算结果、
   颜色逻辑一个字没动，见 marketDetail.js updatePreview 及其调用的三个具体渲染函数） */
.sim-preview {
    background-color: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.sim-preview-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.18rem 0;
}

.sim-preview-row span {
    font-size: 0.85rem;
    color: #6b7280;
    flex-shrink: 0;
}

.sim-preview-row strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* 普通行和"最重要结果"行之间的一条很淡的分隔线，不用图标、不用阴影、不用额外卡片 */
.sim-preview-divider {
    border-top: 1px solid #e5e7eb;
    margin: 0.25rem 0;
}

/* 预览里视觉最重要的结果数字（预计获得份额 / 结果成立预计返还 / 预计获得金额）：
   用页面已有的盈利绿色 var(--profit)，字号在 18–22px 区间内，比其它行更突出但不再是
   之前的大号数字，不新增第二种绿色 */
.sim-preview-row-primary strong {
    font-size: 1.3rem;
    color: var(--profit);
    font-variant-numeric: tabular-nums;
}

/* 限价买入预览里的"预计获得份额"：和金额行（绿色）区分开，用站内已有的品牌蓝
   var(--brand)，字号和金额行保持一致，同样醒目，只是颜色不同 */
.sim-preview-row-shares strong {
    font-size: 1.3rem;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/* 市价按金额买入 / 市价卖出：订单簿深度不足时的警示行，和 sim-preview-row 结构一致，
   只是文字变红、不再是"标签+数值"的两栏布局，这里的 span 直接占满整行 */
.sim-preview-row.sim-preview-warning {
    color: #dc2626;
    font-weight: 500;
}

.sim-preview-row.sim-preview-warning span {
    color: #dc2626;
    font-size: 0.85rem;
}

/* "结果成立预计返还"下面的说明文字：明确这是理论结算价值，不是马上到账的余额变化 */
.sim-preview-note {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #e5e7eb;
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.4;
}

.sim-submit-btn {
    border: none;
    background-color: #2563eb;
    color: white;
    padding: 0.7rem;
    border-radius: 0.65rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s;
    /* 比面板统一 gap 再额外拉近一点，让按钮紧跟在预计结果摘要下面（其它相邻区块
       之间继续用面板统一的 gap，只有这一对间距单独收紧） */
    margin-top: -0.2rem;
}

.sim-submit-btn:hover {
    background-color: #1d4ed8;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.sim-submit-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.sim-submit-btn:disabled {
    background-color: #93c5fd;
    cursor: wait;
    box-shadow: none;
    transform: none;
}

/* 2026-10：未满足原有提交条件时浅蓝且不可点击。复用现有状态：updatePreview() 在金额/份额/
   限价无效时会把紧挨在按钮前面的 #simPreview 设为 display:none，输入有效后恢复显示——
   这里只按这个现有状态切换外观，不改 JS、不改提交校验（handleSimSubmit 原有校验仍然兜底） */
#simPreview[style*="display: none"] + .sim-submit-btn:not(:disabled) {
    background-color: #93c5fd;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    pointer-events: none;
}

.sim-order-result {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 0.5rem;
    padding: 0.85rem;
    font-size: 0.85rem;
}

.sim-order-result-title {
    font-weight: 700;
    color: #059669;
    margin-bottom: 0.5rem;
}

.sim-order-result-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    color: #374151;
}

.sim-order-result-row strong {
    color: #111827;
}

/* 已结算状态卡：圆形完成图标 + "已结算" + 彩色"结果：Yes/No" + 市场标题，替代原来的
   下单表单区域，完全只读，不包含任何下单入口 */
.settled-status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1rem 1.25rem;
    gap: 0.4rem;
}

.settled-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.3rem;
}

.settled-status-label {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.settled-status-result {
    font-size: 1.05rem;
    font-weight: 800;
    color: #374151;
}

.settled-status-result.is-yes {
    color: #16a34a;
}

.settled-status-result.is-no {
    color: #dc2626;
}

.settled-status-title {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* 提交结果弹窗：覆盖整个 .sim-panel（position:relative 的定位基准就是它），视觉上
   正好盖住预览区和输入区，不跑到整页正中央，也不会跑去左侧走势图区域。
   遮罩本身可以拦截点击（下面 .sim-result-modal 之外的区域都不可交互），配合弹窗打开期间
   提交按钮本身也保持 disabled，双重防止重复提交。按用户要求，点击遮罩不关闭 */
.sim-result-modal-overlay {
    position: absolute;
    inset: 0;
    /* 原来是白色半透明，容易和页面浅灰背景融在一起，看不出弹窗是"浮在上面"的；
       改成深灰蓝半透明 + 轻微背景模糊，和持仓/待成交/历史三个弹窗的遮罩统一，
       让弹窗明显独立于页面内容之上。点遮罩不关闭的行为不变（没有绑定点击事件） */
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.sim-result-modal {
    position: relative;
    width: 100%;
    max-width: 320px;
    max-height: 100%;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    border: 1px solid var(--modal-surface-border);
    padding: 1.35rem 1.1rem 1.1rem;
}

.sim-result-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.4rem;
}

.sim-result-modal-close:hover {
    color: #4b5563;
    background: #f3f4f6;
}

/* 只有市价买入/卖出成功会显示（JS 里按 showIcon 参数 toggle display），限价成功弹窗和
   所有失败弹窗都保持不显示，维持原样 */
.sim-result-modal-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.1rem auto 0.6rem;
    border-radius: 50%;
    background: var(--profit);
    align-items: center;
    justify-content: center;
}

/* 限价买入"已提交"专用图标颜色：蓝色，和上面代表"已经成交"的绿色勾明确区分开。
   尺寸/圆形/居中都继承自 .sim-result-modal-icon，这里只覆盖背景色 */
.sim-result-modal-icon-pending {
    background: var(--brand);
}

.sim-result-modal-title {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.15rem 0 1rem;
}

.sim-result-modal-title-success {
    color: var(--profit);
}

.sim-result-modal-title-error {
    color: var(--loss);
}

/* 限价买入"已提交"标题颜色：蓝色，不用代表"已经成交"的绿色，也不用代表失败的红色。
   这种情况下标题下面紧跟着一个副标题，标题自己的下边距缩小，间距交给副标题的下边距统一控制 */
.sim-result-modal-title-pending {
    color: var(--brand);
    margin-bottom: 0.15rem;
}

/* "订单已进入撮合队列"这类副标题：灰色小字，紧贴标题下方，只有限价"已提交"弹窗会用到，
   其它弹窗保持 display:none，不占位 */
.sim-result-modal-subtitle {
    text-align: center;
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 0.9rem;
}

/* 限价买入"已提交"弹窗专属副标题颜色："订单撮合中…"用灰蓝色，和默认纯灰的
   .sim-result-modal-subtitle 区分开，避免使用绿色让用户误以为已经成交 */
.sim-result-modal-subtitle-pending-blue {
    color: #475569;
}

/* 限价买入"已提交"弹窗新增的三行（提交时间/订单有效期/剩余时间）专属颜色，只在这一个
   弹窗里用到，不影响 .sim-order-result-row strong 的默认颜色 */
.sim-pending-value-gray {
    color: #374151;
}

.sim-pending-value-blue {
    color: var(--brand);
}

.sim-pending-value-orange {
    color: var(--warning);
    font-variant-numeric: tabular-nums;
}

/* "未成交部分将在到期后自动退回账户"提示：浅灰小字，放在"等待成交"状态行下面 */
.sim-pending-hint-text {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: center;
}

.sim-result-modal-body {
    font-size: 0.9rem;
    /* 标题（有的还带副标题）和下面的信息内容之间加一条浅灰分隔线，呼应持仓/待成交/历史
       弹窗标题栏本来就有的分隔线，四个弹窗看起来是同一套系统。放在 body 顶部而不是标题
       底部，这样不管这次是不是显示副标题（市价成功/失败弹窗没有副标题），分隔线的位置
       都一致，不需要额外判断 */
    padding-top: 0.85rem;
    margin-top: 0.15rem;
    border-top: 1px solid var(--divider);
}

.sim-result-modal-body .sim-order-result-row {
    font-size: 0.9rem;
    padding: 0.35rem 0;
}

.sim-result-modal-body .sim-order-result-row strong {
    font-variant-numeric: tabular-nums;
}

/* 市场标题这一行单独限制宽度并单行省略，避免长标题把弹窗撑宽或换行破坏对齐；
   标签本身（"市场标题"三个字）不参与压缩，只压缩右边的值 */
.sim-result-modal-body .sim-result-row-title span {
    flex-shrink: 0;
}

.sim-result-modal-body .sim-result-row-title strong {
    flex: 1;
    min-width: 0;
    margin-left: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 份额增加/扣除都用这个：蓝色、加大、加粗，和输入区域"预计获得份额"保持同一套视觉语言 */
.sim-result-modal-body .sim-result-row-highlight-shares strong {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand);
}

/* 余额增加用这个：绿色、加大、加粗 */
.sim-result-modal-body .sim-result-row-highlight-amount strong {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--profit);
}

/* "当前状态"小标签：绿色底、绿色字，圆角胶囊，和行内其它 <strong> 数值区分开。
   这里直接写弹窗状态色系统给的精确色值（只在这个弹窗内部用，不影响 --profit-soft 这个
   全站变量本来的取值和用到它的其它地方） */
.sim-result-modal-status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: #DCFCE7;
    color: var(--profit);
    font-size: 0.78rem;
    font-weight: 600;
}

/* "等待成交"专用：橙色，和已经成交的绿色 badge 区分开。var(--warning) 是站内已有的橙色 token，
   背景色是同色系的浅色版本，站内目前没有现成的 --warning-soft，这里直接写一个和
   --profit-soft/--loss-soft 同量级的浅色值，不新增全局变量 */
.sim-result-modal-status-badge-warning {
    background: #FEF3C7;
    color: var(--warning);
}

.sim-result-modal-error-text {
    margin: 0;
    color: #374151;
    text-align: center;
    line-height: 1.6;
    /* 浅红提示区域：文字本身保持深灰、清楚易读，只用浅红底 + 细边框标记"这是一条错误信息"，
       不做成大面积纯红警告框 */
    padding: 0.6rem 0.7rem;
    background-color: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 10px;
}

/* 按钮统一放在一个 flex 行里：平时只有"确定"一个按钮，flex:1 让它占满整行，视觉上和之前
   width:100% 的效果完全一样；限价买入"已提交"弹窗会额外显示"查看待成交"，两个按钮各占一半 */
.sim-result-modal-btn-row {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.sim-result-modal-confirm {
    display: block;
    flex: 1;
    padding: 0.65rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.sim-result-modal-confirm:hover {
    background: var(--brand-hover);
}

/* "查看待成交"：次要按钮，蓝色描边+蓝色字，和"确定"的实心蓝形成主/次视觉层级 */
.sim-result-modal-secondary-btn {
    display: block;
    flex: 1;
    padding: 0.65rem;
    border: 1px solid var(--brand);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.sim-result-modal-secondary-btn:hover {
    background: var(--brand-soft);
}

/* 紧凑模式：只有市价买入/卖出成功弹窗会加 .sim-result-modal-compact 这个 class（JS 里
   openSimResultModal 只在 showIcon=true 时加，目前只有市价买入/卖出成功会传 true）。
   限价成功弹窗和所有失败弹窗完全不受下面任何一条规则影响，继续用上面定义的原始尺寸。
   9 行内容之前用原尺寸会超出面板高度，出现内部滚动条；这里去掉 max-height/overflow-y
   （不再靠滚动条兜底），改为把内边距、行间距、图标、标题字号、正文字号、按钮高度统一
   收紧，让内容自然缩小到一屏放得下，不需要滚动、不隐藏任何字段 */
.sim-result-modal.sim-result-modal-compact {
    max-width: 300px;
    max-height: none;
    overflow-y: visible;
    padding: 0.8rem 0.85rem 0.7rem;
}

.sim-result-modal-compact .sim-result-modal-icon {
    width: 2.1rem;
    height: 2.1rem;
    margin: 0 auto 0.3rem;
}

.sim-result-modal-compact .sim-result-modal-icon svg {
    width: 16px;
    height: 16px;
}

.sim-result-modal-compact .sim-result-modal-title {
    font-size: 1.05rem;
    margin: 0.05rem 0 0.45rem;
}

.sim-result-modal-compact .sim-result-modal-body {
    font-size: 0.76rem;
    /* 紧凑模式（市价成功弹窗）9 行内容本来就要收紧才能一屏放下，分隔线保留但内边距压到
       最小，不占用额外空间破坏原来的紧凑排版 */
    padding-top: 0.4rem;
    margin-top: 0.05rem;
}

.sim-result-modal-compact .sim-order-result-row {
    font-size: 0.76rem;
    padding: 0.16rem 0;
}

.sim-result-modal-compact .sim-result-row-highlight-shares strong,
.sim-result-modal-compact .sim-result-row-highlight-amount strong {
    font-size: 1.05rem;
}

.sim-result-modal-compact .sim-result-modal-status-badge {
    font-size: 0.66rem;
    padding: 0.08rem 0.45rem;
}

.sim-result-modal-compact .sim-result-modal-btn-row {
    margin-top: 0.55rem;
}

.sim-result-modal-compact .sim-result-modal-confirm {
    padding: 0.45rem;
    font-size: 0.82rem;
}

.sim-disclaimer {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .market-layout {
        grid-template-columns: 1fr;
    }

    .market-layout-right {
        position: static;
    }

    /* 手机/平板端不悬浮市场标题，恢复正常文档流，避免长期占屏 */
    .market-header-card {
        position: static;
    }

    .quickstat-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .quickstat-prob {
        grid-template-columns: 1fr;
    }

    .sim-quick-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 窄屏（如 390px）：方向文字和"当前份额"挤不下同一行时，"当前份额"自然换到下一行，
       margin-left: auto 让它在换行后依然靠右对齐，不横向溢出 */
    .sim-market-summary-second-row {
        flex-wrap: wrap;
    }

    /* 手机端标题图片略缩小，标题依旧保持单行省略，不挤压其它控件 */
    .sim-market-summary-image {
        width: 50px;
        height: 50px;
        max-width: 50px;
        max-height: 50px;
    }

    /* 窄屏空间不足时的降级顺序：先缩小"当前份额"标签字号，再缩小盈亏百分比字号，
       份额主数字始终保持原样醒目，不缩小、不截断；真正放不下时靠上面的 flex-wrap
       自然换成两行，不依赖这里的字号收缩来避免溢出 */
    .sim-current-position-label {
        font-size: 0.68rem;
    }

    .sim-current-position-pnl {
        font-size: 0.78rem;
    }

    /* "查看"保持最小宽度和可点性，不参与收缩 */
    .sim-more-entry {
        flex-shrink: 0;
    }

    /* 手机端金额/份额大输入框适当缩小字号，避免长数字在窄屏上把行撑宽；
       input 本身仍然是单个可横向滚动的输入框，数字不会被裁切，只是不再那么大。
       "$" 和数字字号在手机端也必须保持一致，同上桌面端的道理 */
    .sim-input-shares,
    .sim-input-prefix {
        font-size: 1.5rem;
    }
}

/* ==================== 预测练习页面（Frontend-1，独立新增，不改上面已有样式） ==================== */

.pred-back-link {
    text-decoration: none;
    margin-left: 0.75rem;
}

.pred-page-header {
    margin-bottom: 1.5rem;
}

.pred-page-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.pred-page-sub {
    color: var(--text-secondary);
    font-size: 13px;
    max-width: 720px;
}

.pred-section {
    margin-bottom: 2rem;
}

.pred-section h3 {
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    color: var(--text-primary);
}

.pred-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 16px;
}

.pred-stat {
    min-height: 108px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 0.9rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pred-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-number);
}

.pred-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.pred-stat-loading,
.pred-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1rem 0;
}

.pred-market-card {
    gap: 0.6rem;
}

.pred-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pred-price-item {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--surface-muted);
}

.pred-price-yes {
    color: var(--yes-text);
}

.pred-price-no {
    color: var(--no-text);
}

.pred-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.pred-badge-polymarket {
    background-color: #dcfce7;
    color: #15803d;
}

.pred-badge-mock {
    background-color: #f3f4f6;
    color: #6b7280;
}

.pred-badge-mock_fallback {
    background-color: #fef3c7;
    color: #b45309;
}

.pred-orderbook-line {
    font-size: 0.7rem;
    color: #999;
    margin-bottom: 0.75rem;
    min-height: 1rem;
}

.pred-submit-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.pred-points-input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.pred-yn-buttons {
    margin-top: 0;
}

.pred-result-slot:empty {
    display: none;
}

.pred-result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.pred-result-ok {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.pred-result-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.pred-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pred-row {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pred-row:hover {
    border-color: #BFDBFE;
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.pred-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pred-row-market {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.pred-outcome-tag,
.pred-status-tag,
.pred-win-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}

.pred-outcome-yes {
    background-color: var(--yes-bg);
    color: var(--yes-text);
    border: 1px solid var(--yes-border);
}

.pred-outcome-no {
    background-color: var(--no-bg);
    color: var(--no-text);
    border: 1px solid var(--no-border);
}

.pred-status-open {
    background-color: var(--brand-soft);
    color: var(--brand);
}

.pred-status-closed {
    background-color: var(--surface-muted);
    color: var(--text-secondary);
}

.pred-status-cancelled {
    background-color: var(--surface-muted);
    color: var(--text-muted);
}

.pred-win {
    background-color: var(--profit-soft);
    color: var(--profit);
}

.pred-lose {
    background-color: var(--loss-soft);
    color: var(--loss);
}

.pred-row-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    /* 手机版第二批：页面左右边距 12px -> 16px（.pred-page 只在 predictions.html 使用，
       my-predictions.html 用的是自己的 .mypred-page，不受影响） */
    .pred-page {
        padding: 1rem 1rem;
    }

    .pred-summary-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .pred-row-detail {
        gap: 0.5rem 0.9rem;
    }
}

@media (max-width: 480px) {
    .pred-summary-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .pred-stat-value {
        font-size: 1.1rem;
    }
}

/* ==================== 管理后台（Admin-1） ==================== */

.admin-login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding: 1rem;
}

.admin-login-box {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    padding: 2rem;
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.admin-login-box h1 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.admin-login-sub {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1.25rem;
}

.admin-token-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.admin-login-error {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

.admin-btn {
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-btn-primary {
    background-color: #2563eb;
    color: white;
    width: 100%;
}

.admin-btn-ghost {
    background-color: #f0f0f0;
    color: #1a1a1a;
}

.admin-app {
    min-height: 100vh;
    background-color: #f5f7fa;
}

.admin-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.admin-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-logo {
    font-size: 1.25rem;
    color: #2563eb;
}

.admin-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
}

.admin-nav-btn {
    padding: 0.75rem 0.9rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.admin-nav-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.admin-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.active {
    display: block;
}

.admin-tab-panel h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.admin-stat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.admin-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
}

.admin-stat-label {
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.25rem;
}

.admin-form {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.admin-form h3 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: #1a1a1a;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.admin-form-full {
    grid-column: 1 / -1;
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #444;
}

.admin-form input,
.admin-form textarea {
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-family: inherit;
    box-sizing: border-box;
}

.admin-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.admin-form-msg {
    font-size: 0.8rem;
    color: #10b981;
    margin-top: 0.5rem;
}

.admin-form-msg-error {
    color: #dc2626;
}

.admin-table-wrap {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 640px;
}

.admin-table th,
.admin-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.admin-table th {
    color: #666;
    font-weight: 600;
    background-color: #fafafa;
}

.admin-loading,
.admin-empty {
    text-align: center;
    color: #999;
    padding: 1.5rem !important;
}

.admin-status-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-status-active {
    background-color: #d1fae5;
    color: #059669;
}

.admin-status-hidden {
    background-color: #fef3c7;
    color: #92400e;
}

.admin-status-archived,
.admin-status-closed {
    background-color: #f3f4f6;
    color: #6b7280;
}

.admin-row-actions {
    white-space: nowrap;
}

.admin-link-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}

.admin-link-btn-danger {
    color: #dc2626;
}

/* ---------- 2026-10 后台市场来源 / 市场详情（只读，仅 admin.html 使用 .admin-mkt-* / .admin-source-*） ---------- */
.admin-mkt-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
    font-size: 0.8rem;
    color: #555;
}

.admin-mkt-toolbar select {
    margin-left: 0.4rem;
    padding: 0.25rem 0.4rem;
}

.admin-mkt-count {
    color: #888;
}

.admin-source-tag {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    white-space: nowrap;
    background: #f3f4f6;
    color: #4b5563;
}

.admin-source-asfo { background: #dbeafe; color: #1d4ed8; }
.admin-source-external { background: #f3f4f6; color: #4b5563; }
.admin-source-builtin { background: #fef3c7; color: #92400e; }

.admin-mkt-detail {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    background: #fff;
}

.admin-mkt-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-mkt-detail-head h3 {
    margin: 0;
    font-size: 1rem;
}

.admin-mkt-note {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.6;
    margin: 0.6rem 0;
}

.admin-mkt-muted {
    color: #888;
}

.admin-mkt-stats {
    margin: 0.75rem 0;
}

.admin-mkt-books {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.admin-mkt-book h4 {
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.admin-mkt-book h4 span {
    margin-left: 0.5rem;
    font-weight: 400;
    font-size: 0.72rem;
    color: #888;
}

.admin-mkt-book-table td {
    font-variant-numeric: tabular-nums;
}

.admin-mkt-ask td { color: #dc2626; }
.admin-mkt-bid td { color: #16a34a; }

.admin-mkt-empty,
.admin-mkt-empty-side {
    color: #888;
    font-size: 0.8rem;
}

.admin-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #666;
}

@media (max-width: 600px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-header-inner {
        padding: 0.75rem 1rem 0;
    }

    .admin-main {
        padding: 1rem 0.75rem 2rem;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== Polymarket 映射市场图片展示位 ====================
   2026-07-13 布局精简：从"标题上方 120px 大图"改成"标题左侧 52px 小图标"，
   和分类标签、标题一起组成紧凑的可吸顶标题核心区域（见 .market-header-sticky-inner），
   避免吸顶后占用过高，压住下方走势图 Canvas */

.detail-market-image {
    display: block;
    /* 顶部标题区域连续缩小动画的一部分：和 .market-header-card 共用同一个
       --mh-progress，图片随滚动连续缩小，不是切换成另一张小图。
       本轮：整体放大 20%（原 52px→62.4px，原收缩终点 31.2px→37.44px，收缩幅度
       20.8px→24.96px，等比例放大，缩放动画曲线形状不变，只是起止点都变大） */
    width: calc(62.4px - (var(--mh-progress, 0) * 24.96px));
    height: calc(62.4px - (var(--mh-progress, 0) * 24.96px));
    max-width: 62.4px;
    max-height: 62.4px;
    border-radius: 0.6rem;
    margin-bottom: 0;
    object-fit: cover;
    flex-shrink: 0;
}

/* ==================== market_pm_xxx 实时数据轮询：数值更新过渡动画 ==================== */
/* 数值变化时短暂高亮再淡回原色，不改变布局、不闪烁整张卡片/整个区块 */

[data-field] {
    transition: color 0.5s ease;
}

.value-pulse {
    color: #2563eb;
    animation: value-pulse-fade 0.9s ease;
}

@keyframes value-pulse-fade {
    0% { opacity: 0.55; }
    100% { opacity: 1; }
}

.market-live-stats {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

/* 首页小卡片剩余时间不再可见展示：这个节点只保留 data-close-time / countdown 文本节点
   供 tickLocalDisplays 每秒判断市场是否到期并禁用按钮，详情页倒计时不受影响 */
.market-live-stats-hidden {
    display: none;
}

.market-live-updated {
    white-space: nowrap;
}

.quickstat-live-status {
    font-size: 0.75rem;
    color: #dc2626;
    margin-left: 0.4rem;
}

/* Yes/No 价格涨跌闪烁：只闪该数字本身所在的小方块，不影响整张卡片 */

.price-flash-up,
.price-flash-down {
    border-radius: 0.375rem;
}

.price-flash-up {
    animation: price-flash-up 0.6s ease;
}

.price-flash-down {
    animation: price-flash-down 0.6s ease;
}

@keyframes price-flash-up {
    0% { color: #16a34a; background-color: rgba(22, 163, 74, 0.16); }
    100% { color: inherit; background-color: transparent; }
}

@keyframes price-flash-down {
    0% { color: #dc2626; background-color: rgba(220, 38, 38, 0.16); }
    100% { color: inherit; background-color: transparent; }
}

.market-countdown {
    font-weight: 600;
    white-space: nowrap;
}

.market-countdown.is-ended,
#quickCloseTime.is-ended {
    color: #9ca3af;
}

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

/* ==================== 我的预测页面 ==================== */
/* 复用现有白底/浅灰页面背景/品牌蓝/卡片圆角/阴影/页面宽度，不引入新的设计语言 */

.mypred-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* 标题区 + 4 张统计卡同一行（桌面端瘦身布局）：标题区固定宽度靠左，统计卡组占满剩余宽度，
   整行左右边界和下面的标签栏/持仓列表共用同一个 .mypred-page 容器宽度，天然对齐 */
.mypred-top-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.mypred-page-header {
    flex: 0 0 240px;
    min-width: 0;
}

.mypred-page-header .detail-back-row {
    margin-bottom: 0.4rem;
}

.mypred-page-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.mypred-page-header .pred-page-sub {
    line-height: 1.4;
}

.mypred-stats-grid {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 10px;
}

.mypred-stat-card {
    flex: 1;
    min-width: 175px;
    max-width: 190px;
    height: 76px;
    box-sizing: border-box;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.mypred-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
}

.mypred-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-number);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#statSettledAmount {
    color: var(--brand);
}

/* 选项卡 + 筛选工具条 */

.mypred-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.25rem;
}

.mypred-tabs {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mypred-tab {
    display: inline-flex;
    align-items: center;
    height: 44px;
    background: none;
    border: none;
    padding: 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    transition: background-color 0.15s, color 0.15s;
}

.mypred-tab:hover {
    background-color: #F1F5F9;
}

.mypred-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    font-weight: 600;
}

.mypred-tab.active:hover {
    background-color: transparent;
}

.mypred-filters {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.mypred-filter-select {
    height: 38px;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-sm);
    padding: 0 0.6rem;
    font-size: 0.8rem;
    color: var(--text-number);
    background-color: var(--surface);
    transition: border-color 0.15s;
}

.mypred-filter-select:hover {
    border-color: #93c5fd;
}

.mypred-filter-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 从市场详情页"当前持仓"跳转过来时的只读筛选提示条 */
.mypred-market-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.mypred-market-filter-clear {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

/* 持仓卡片：偏向"股票账户持仓列表"的横向三段布局，不是首页市场卡片那种大图卡片 */

.mypred-list {
    display: flex;
    flex-direction: column;
}

/* .mypred-card 现在是外层纵向容器：.mypred-card-main（原来整张卡片的三栏横向布局）+
   可选的成交明细展开区（只有 status='open' 的卡片才有），互不影响原有三栏布局本身 */
.mypred-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 126px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mypred-card:hover {
    border-color: #BFDBFE;
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.mypred-list .mypred-card:last-child {
    margin-bottom: 0;
}

.mypred-card-main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.mypred-card-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 220px;
    min-width: 0;
}

.mypred-card-image {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.mypred-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-soft);
    font-size: 1.25rem;
}

.mypred-card-title-block {
    min-width: 0;
}

.mypred-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mypred-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.mypred-card-mid {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.mypred-outcome-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
}

.mypred-outcome-yes {
    background-color: var(--yes-bg);
    border: 1px solid var(--yes-border);
    color: var(--yes-text);
}

.mypred-outcome-no {
    background-color: var(--no-bg);
    border: 1px solid var(--no-border);
    color: var(--no-text);
}

/* 字段区改用固定列宽的 grid，而不是内容驱动宽度的 flex-wrap：
   之前每个 .mypred-field 只有 min-width，没有固定宽度，靠内容自身撑开，
   倒计时文字每秒变化时这一列的实际宽度会跟着抖动，从而把同一行里排在它后面的
   "当前总盈亏"挤得跟着左右摆动。改成 grid + minmax(_, 1fr) 之后，
   每一列的宽度只由容器总宽度和列数决定，不再随某一格内容变化而重新计算，
   倒计时文字变化不会再影响其它字段的位置。 */
/* 4 列宽度不再平均分配：第 2 列会落到"剩余时间"（最长可到"168天 22时15分02秒"，
   实测约 140px 宽），如果和其它列一样只给 110px，长倒计时会在 white-space:nowrap 下
   把这一列撑到比预留宽度更宽，视觉上盖到右边"当前总盈亏"所在的第 3 列。
   这里按各列真实最长内容单独给最小宽度，而不是所有列用同一个数字。 */
.mypred-fields {
    display: grid;
    grid-template-columns:
        minmax(90px, 1fr)
        minmax(140px, 1fr)
        minmax(95px, 1fr)
        minmax(90px, 1fr);
    gap: 0.5rem 1.5rem;
    flex: 1;
}

.mypred-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.mypred-field span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.mypred-field strong {
    font-size: 15px;
    color: var(--text-number);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mypred-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
}

.mypred-status-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.mypred-status-open {
    background-color: var(--brand-soft);
    color: var(--brand);
}

.mypred-status-pending {
    background-color: #fffbeb;
    color: var(--warning);
}

.mypred-status-settled {
    background-color: var(--surface-muted);
    color: var(--text-secondary);
}

.mypred-status-cancelled {
    background-color: var(--surface-muted);
    color: var(--text-muted);
}

.mypred-card-actions {
    display: flex;
    gap: 0.5rem;
}

.mypred-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.mypred-btn-primary {
    background-color: var(--brand);
    color: white;
}

.mypred-btn-primary:hover {
    background-color: var(--brand-hover);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
    transform: translateY(-1px);
}

.mypred-btn-primary:active {
    background-color: var(--brand-active);
    transform: translateY(0);
}

.mypred-btn-secondary {
    background-color: var(--surface);
    border-color: #CBD5E1;
    color: #334155;
}

.mypred-btn-secondary:hover {
    background-color: var(--surface-muted);
    border-color: #93c5fd;
    color: var(--brand);
}

.mypred-btn-cancel {
    background-color: var(--surface);
    border-color: var(--no-border);
    color: var(--loss);
}

.mypred-btn-cancel:hover {
    background-color: var(--loss-soft);
}

.mypred-btn-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* "成交明细"展开区：只在 status='open' 的卡片上出现，展示这张合并持仓背后的每一笔独立成交，
   不改这张卡片本身原有的汇总字段 */
.mypred-trades-breakdown {
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mypred-trade-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    padding: 0.5rem 0.75rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    color: #4b5563;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.mypred-trade-row strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* 从详情页"当前持仓"弹窗某一笔"查看详情"跳过来时，定位并高亮这一笔具体成交 */
.mypred-trade-row.mypred-trade-highlight {
    background-color: #eff6ff;
    box-shadow: 0 0 0 2px #93c5fd;
}

.mypred-trades-loading {
    font-size: 0.78rem;
    color: #9ca3af;
    padding: 0.4rem 0.75rem;
}

.mypred-pnl-positive {
    color: var(--profit);
    font-weight: 700;
}

.mypred-pnl-negative {
    color: var(--loss);
    font-weight: 700;
}

.mypred-pnl-flat {
    color: var(--text-secondary);
    font-weight: 700;
}

/* 修复盈亏颜色被覆盖的问题：.mypred-field strong / .mypred-invoice-row strong / .mypred-stat-value
   本身都带了固定的深色文字颜色（class + 元素选择器，优先级比单独一个 .mypred-pnl-positive 类高），
   导致"当前总盈亏"/"已实现盈亏"/结算发票里的盈亏数字即使加了正确的正负色 class 也显示不出来，
   一直是同一个深色。这里用更具体的组合选择器让盈亏颜色类在这几个场景里生效，不用 !important，
   也不改变这些容器本身其它未涉及盈亏的深色文字（比如总投入、成交价，那些没有 pnl class 不受影响）。 */
.mypred-field strong.mypred-pnl-positive,
.mypred-invoice-row strong.mypred-pnl-positive,
.mypred-stat-value.mypred-pnl-positive {
    color: var(--profit);
}

.mypred-field strong.mypred-pnl-negative,
.mypred-invoice-row strong.mypred-pnl-negative,
.mypred-stat-value.mypred-pnl-negative {
    color: var(--loss);
}

.mypred-field strong.mypred-pnl-flat,
.mypred-invoice-row strong.mypred-pnl-flat,
.mypred-stat-value.mypred-pnl-flat {
    color: var(--text-secondary);
}

.mypred-empty {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #6b7280;
}

.mypred-empty p {
    margin: 0.25rem 0;
}

.mypred-empty-sub {
    font-size: 0.85rem;
    color: #9ca3af;
}

.mypred-empty .mypred-btn {
    margin-top: 1rem;
}

.mypred-load-more-row {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.mypred-load-more-btn {
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}

.mypred-load-more-btn:hover {
    background-color: #f8fafc;
}

@media (max-width: 768px) {
    /* 平板/手机：标题单独一行，统计卡改成 2x2 紧凑网格（不再是同一行横排） */
    .mypred-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .mypred-page-header {
        flex: none;
    }

    .mypred-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mypred-stat-card {
        max-width: none;
        min-width: 0;
    }

    .mypred-card-main {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .mypred-card-left {
        flex: none;
    }

    .mypred-card-mid {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* 窄屏下 4 列会挤不下，改成 2 列；列宽仍然由 grid 自己稳定分配，
       不回退到内容驱动宽度的 flex-wrap，倒计时抖动的修复在这个断点下同样有效 */
    .mypred-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .mypred-countdown {
        min-width: 0;
    }

    .mypred-card-right {
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
    }

    .mypred-card-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .mypred-page {
        /* 页面左右边距从 12px 收到 16px，和站内其它手机版页面的页面留白统一 */
        padding: 1rem 1rem 2rem;
    }

    .mypred-stats-grid {
        gap: 0.6rem;
    }

    .mypred-stat-card {
        height: 68px;
        padding: 10px 12px;
    }

    .mypred-stat-value {
        font-size: 1.1rem;
    }

    .mypred-card-title {
        font-size: 0.85rem;
    }
}

/* ==================== "追加预测"跳转过来后，预测面板短暂高亮 ==================== */
/* 只加边框/阴影变化，不改变面板本身尺寸和布局，约 1.8 秒后由 JS 移除这个 class 恢复原样 */

.sim-panel-focus-highlight {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 1px 4px rgba(15, 23, 42, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==================== "我的预测"独立持仓批次升级：标签角标 / 分组卡片展开 / 结算发票 ==================== */

/* 标签页右上角红色数字角标：当前持仓=未结算批次总数，已结算=未查看批次数。数量为 0 时由 JS 隐藏，不占位。 */
.mypred-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background-color: var(--badge-count);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* 同市场同方向多笔独立持仓时，"持仓中"文字右侧的醒目红色圆形数字（如"持仓中③"），
   只在 lotCount > 1 时由 JS 渲染出来，单笔持仓不显示，避免视觉噪音。
   用 --badge-count（#EF4444）而不是亏损红（--loss #DC2626），
   避免用户把"数量提醒"误读成"亏损"，两者含义不同、颜色也刻意区分开 */
.mypred-lotcount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background-color: var(--badge-count);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.mypred-lotgroup-card .mypred-card-mid {
    flex-wrap: wrap;
}

/* 点击"查看"后在卡片下方原地展开的独立持仓批次明细区，不跳转、不刷新、不改变滚动位置 */
.mypred-lotgroup-expand {
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mypred-lot-row {
    background-color: var(--surface-muted);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* 倒计时视觉（不改变计算方式，只加颜色语义）：正常深灰蓝；不足 5 分钟琥珀色提醒；
   等待结算用品牌蓝；结算异常用亏损红。
   额外加等宽数字 + 固定最小宽度：倒计时每秒只改文字内容，不应该让这一格的宽度
   跟着数字字形宽度做亚像素级抖动，进而带动同一行后面的"当前总盈亏"跟着摆动 */
.mypred-countdown {
    display: inline-block;
    min-width: 92px;
    white-space: nowrap;
    color: #334155;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.mypred-countdown-warning {
    color: var(--warning);
}

.mypred-countdown-pending {
    color: var(--brand);
}

.mypred-countdown-error {
    color: var(--loss);
}

.mypred-lot-row.mypred-trade-highlight {
    background-color: #eff6ff;
    box-shadow: 0 0 0 2px #93c5fd;
}

.mypred-lot-row-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.mypred-lot-row-top > span:last-child {
    font-size: 18px;
}

.mypred-lot-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}

.mypred-lot-fields .mypred-field {
    min-width: 0;
}

.mypred-lot-detail-link {
    align-self: flex-end;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.mypred-lot-detail-link:hover {
    text-decoration: underline;
}

.mypred-status-pending-lot {
    background-color: #fffbeb;
    color: var(--warning);
}

.mypred-status-error {
    background-color: var(--loss-soft);
    color: var(--loss);
}

/* 结算发票展开区："结算单号/持仓批次ID/..."逐行明细，所有数值均来自真实结算记录，不前端估算 */
.mypred-invoice {
    border-top: 1px dashed var(--divider);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mypred-invoice-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.mypred-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    padding: 0.3rem 0;
    border-bottom: 1px dotted var(--divider);
}

.mypred-invoice-row span {
    color: var(--text-muted);
    flex-shrink: 0;
}

.mypred-invoice-row strong {
    color: var(--text-number);
    font-weight: 600;
    text-align: right;
}

@media (max-width: 480px) {
    /* 展开的独立持仓明细在手机端改用单栏布局，字段逐行堆叠，避免挤压导致字号变小或换行错位 */
    .mypred-lot-fields {
        grid-template-columns: 1fr;
    }

    .mypred-invoice-row {
        font-size: 0.78rem;
    }

    .mypred-card-actions .mypred-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.7rem;
    }
}

/* ==================== 全站统一 Footer ====================
   出现在所有带 Header 的用户页面（首页/热门市场/市场详情/我的预测/predictions）以及
   帮助中心/平台信息这批预留占位页面底部，纯静态展示 + 链接，不触碰余额/交易/API/数据库，
   颜色全部取自顶部 :root 里已有的设计变量，不新增一套配色。
   Footer 本身是文档流里的普通块级元素（不是 position:fixed/sticky），天然出现在
   页面正常内容之后，不会悬浮遮挡任何内容 */
.site-footer {
    background-color: var(--surface-muted);
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

.site-footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 1rem 0;
}

.site-footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    padding-bottom: 2rem;
}

.site-footer-col {
    flex: 1;
    min-width: 0;
}

.site-footer-brand {
    flex: 1.4;
}

.site-footer-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 0.6rem;
}

.site-footer-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.site-footer-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 26rem;
}

.site-footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-number);
    margin-bottom: 1rem;
}

.site-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.site-footer-link {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer-link:hover {
    color: var(--brand);
}

.site-footer-bottom {
    border-top: 1px solid var(--divider);
    padding: 1.1rem 0;
    text-align: center;
}

.site-footer-copyright {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .site-footer-columns {
        flex-direction: column;
        gap: 2rem;
    }

    .site-footer-desc {
        max-width: none;
    }
}

/* ==================== 帮助中心/平台信息预留占位页面 ====================
   /guide.html /faq.html /rules.html /contact.html /about.html /privacy.html
   /terms.html /cookie.html /disclaimer.html 这批 Footer 链接目前还没有正式内容，
   先用统一的极简占位页（Logo + 提示文案 + 返回首页 + 同一份 Footer）承接，避免点击
   404 或跳错误页；后续正式内容做好后直接替换对应文件即可，不需要再改 Footer 结构 */
.placeholder-page {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}

.placeholder-page-content {
    text-align: center;
    max-width: 30rem;
}

.placeholder-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-number);
    margin-bottom: 0.75rem;
}

.placeholder-page-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.placeholder-page-back {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.placeholder-page-back:hover {
    color: var(--brand-hover);
}

/* 底部导航默认（桌面端/任何宽屏，以及其它 4 个页面即使意外引入这段 HTML）永远不显示，
   只有下面 @media(max-width:768px) 里显式改成 flex 才会出现，必须放在该媒体查询之前，
   否则同等选择器优先级下按源码顺序，后出现的规则会覆盖前面的，导致手机端也被强制隐藏 */
.mobile-bottom-nav {
    display: none;
}

/* 手机版搜索页整体容器：桌面端默认隐藏（和 .mobile-bottom-nav 同一模式），
   只在 body.page-home.mobile-view-search 且 max-width:768px 下显示，见下方媒体查询 */
.mobile-search-view {
    display: none;
}

/* ====================================================================
   手机版首页重新排版（仅首页 index.html：body.page-home + ≤768px 生效）
   ====================================================================
   桌面端布局、尺寸、位置和功能完全不变（这里全部规则都用 body.page-home 前缀
   限定作用域，其它 4 个页面没有 page-home 这个 class，不受任何影响）。
   核心思路：不新建 Header/导航/市场数据结构，只用 CSS 把已有的 Logo/搜索框/
   资产栏/头像入口/分类导航/轮播/右侧热门市场/Footer/市场卡片重新排版和显示切换，
   配合 app.js 里新增的 bindMobileBottomNav 做纯前端视图切换（一个 body class），
   不触碰余额、充值、下单、持仓、结算、登录、搜索、跳转等任何业务逻辑本身。
   ==================================================================== */
@media (max-width: 768px) {
    /* ---------- 第一~三行：Logo+头像 / 搜索框 / 紧凑资产栏，用 CSS Grid 重新排版 ----------
       .navbar-right/.header-actions 在桌面端和其它页面都是真实的布局容器；这里让它们
       display:contents "拆开"，把里面的头像入口和资产栏直接暴露成 .navbar-container 的
       grid 子项，用 grid-template-areas 精确摆放成三行，不改变任何 DOM 结构/id/事件绑定 */
    /* 第一阶段 App Shell：热门市场/我的预测/预测市场三个页面复用首页同一套手机版
       Header 排版（同一批声明，只是把选择器扩展到这三个 body class，不是另外
       重新写三套/复制三份），达到"全站统一骨架"，同时不改动 body.page-home 本身
       任何一行既有规则的取值 */
    body.page-home .navbar,
    body.page-hot-markets .navbar,
    body.page-my-predictions .navbar,
    body.page-predictions .navbar {
        padding: 0.4rem 0;
        box-shadow: none;
        border-bottom: 1px solid var(--border, #e5e7eb);
    }

    /* 手机版首页顶部只保留 Logo + 头像这一行：搜索框和资产卡片整行从 grid 里去掉
       （不是只用 display:none 留着空行——grid-template-areas 本身就不再声明
       search/assets 这两行，row-gap 也不会在被去掉的行周围产生残留间距），
       组合资金/我的余额改为在头像下拉菜单里展示（见下方 .header-user-dropdown-assets）。
       热门市场/我的预测/预测市场三个页面没有 .header-quick-actions（好友推荐/通知中心，
       本阶段明确不新增），这里仍然声明 "actions" 网格区域但该区域没有内容占位，
       grid 会自动收缩，不会留出多余空白列 */
    body.page-home .navbar-container,
    body.page-hot-markets .navbar-container,
    body.page-my-predictions .navbar-container,
    body.page-predictions .navbar-container {
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "logo actions avatar";
        column-gap: 0.5rem;
        padding: 0 0.85rem;
    }

    /* 好友推荐 + 通知中心：新增的两个手机版专属入口，放在头像左侧。
       .header-actions 本身是 display:contents（见下方既有规则），这个 wrapper
       直接成为 .navbar-container 的 grid 子项，占用新增的 "actions" 列，
       不影响 logo/avatar 两列原有的宽度分配 */
    body.page-home .header-quick-actions {
        grid-area: actions;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    body.page-home .header-quick-action-btn {
        position: relative;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--text-secondary, #4b5563);
        border-radius: 999px;
        cursor: pointer;
        padding: 0;
    }

    body.page-home .header-quick-action-btn svg {
        width: 20px;
        height: 20px;
    }

    body.page-home .header-quick-action-btn:active {
        background-color: rgba(15, 23, 42, 0.06);
    }

    /* 未读红点：只在 JS 确认存在真实未读通知时去掉 hidden 属性才会显示，
       和头像现有的绿色在线点（.header-user-status-dot）视觉上明确区分——
       这里用红色、位置在铃铛右上角，不共用同一个指示点 */
    body.page-home .header-quick-action-dot {
        position: absolute;
        top: 4px;
        right: 5px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background-color: #DC2626;
        border: 1.5px solid #fff;
    }

    body.page-home .navbar-logo,
    body.page-hot-markets .navbar-logo,
    body.page-my-predictions .navbar-logo,
    body.page-predictions .navbar-logo {
        grid-area: logo;
    }

    body.page-home .navbar-logo h1,
    body.page-hot-markets .navbar-logo h1,
    body.page-my-predictions .navbar-logo h1,
    body.page-predictions .navbar-logo h1 {
        font-size: 1.2rem;
    }

    /* 顶部大搜索框整行隐藏（不删除功能/代码，"全部市场"右侧的小圆形搜索按钮
       不受影响，那是完全独立的另一个组件 #categoryToolbarIcons）。热门市场/我的预测/
       预测市场三个页面本身也有同一个 #searchInput，同样隐藏，和首页保持一致 */
    body.page-home .navbar-search,
    body.page-hot-markets .navbar-search,
    body.page-my-predictions .navbar-search,
    body.page-predictions .navbar-search {
        display: none;
    }

    body.page-home .navbar-right,
    body.page-hot-markets .navbar-right,
    body.page-my-predictions .navbar-right,
    body.page-predictions .navbar-right {
        display: contents;
    }

    body.page-home .header-actions,
    body.page-hot-markets .header-actions,
    body.page-my-predictions .header-actions,
    body.page-predictions .header-actions {
        display: contents;
    }

    /* 组合资金/我的余额两张卡片整行隐藏（不删除接口/计算/刷新逻辑，只是不在这里
       直接展示；真实数据继续在头像下拉菜单的账户资产区域里显示，见下方规则） */
    body.page-home .header-assets-bar,
    body.page-hot-markets .header-assets-bar,
    body.page-my-predictions .header-assets-bar,
    body.page-predictions .header-assets-bar {
        display: none;
    }

    /* 卡片本体：浅灰白背景 + 很浅的灰色边框 + 14-16px 圆角，两张卡片 flex:1 等宽
       （这几条实际只在 .header-assets-bar 隐藏之前短暂适用，隐藏后不可见，
       保留只是为了和首页共享同一套完整声明，不产生任何额外副作用） */
    body.page-home .header-action-group,
    body.page-hot-markets .header-action-group,
    body.page-my-predictions .header-action-group,
    body.page-predictions .header-action-group {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        background-color: var(--surface-muted, #F8FAFC);
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 15px;
        padding: 13px 14px;
        box-sizing: border-box;
    }

    body.page-home .header-asset-icon,
    body.page-hot-markets .header-asset-icon,
    body.page-my-predictions .header-asset-icon,
    body.page-predictions .header-asset-icon {
        display: none;
    }

    /* 标签在上、金额在下，卡片内部整体左对齐 */
    body.page-home .header-asset-text,
    body.page-hot-markets .header-asset-text,
    body.page-my-predictions .header-asset-text,
    body.page-predictions .header-asset-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.3rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    body.page-home .header-asset-label,
    body.page-hot-markets .header-asset-label,
    body.page-my-predictions .header-asset-label,
    body.page-predictions .header-asset-label {
        display: block;
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: #374151;
        white-space: nowrap;
        flex: none;
    }

    /* “可用余额”手机版替换成“我的余额”：只切换文字显示，DOM/数据/接口不变 */
    body.page-home .header-asset-label-desktop-text,
    body.page-hot-markets .header-asset-label-desktop-text,
    body.page-my-predictions .header-asset-label-desktop-text,
    body.page-predictions .header-asset-label-desktop-text {
        display: none;
    }

    body.page-home .header-asset-label-mobile-text,
    body.page-hot-markets .header-asset-label-mobile-text,
    body.page-my-predictions .header-asset-label-mobile-text,
    body.page-predictions .header-asset-label-mobile-text {
        display: inline;
    }

    /* 金额本身：$ 符号、整数、小数三段分别设置字号/颜色，align-items:baseline 保证
       三段文字落在同一条基线上，不会上下错位；整数用 clamp() 随视口宽度轻微缩放，
       避免大金额在窄屏上被截断或撑破卡片，同时不写死任何示例数字 */
    body.page-home .header-amount-box,
    body.page-hot-markets .header-amount-box,
    body.page-my-predictions .header-amount-box,
    body.page-predictions .header-amount-box {
        height: auto;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        display: flex;
        justify-content: flex-start;
        text-align: left;
        overflow: hidden;
    }

    body.page-home .header-amount-box .header-amount-full,
    body.page-hot-markets .header-amount-box .header-amount-full,
    body.page-my-predictions .header-amount-box .header-amount-full,
    body.page-predictions .header-amount-box .header-amount-full {
        display: flex !important;
        align-items: baseline;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    body.page-home .header-amount-box .header-amount-mobile-label,
    body.page-hot-markets .header-amount-box .header-amount-mobile-label,
    body.page-my-predictions .header-amount-box .header-amount-mobile-label,
    body.page-predictions .header-amount-box .header-amount-mobile-label {
        display: none !important;
    }

    body.page-home .header-amount-symbol,
    body.page-hot-markets .header-amount-symbol,
    body.page-my-predictions .header-amount-symbol,
    body.page-predictions .header-amount-symbol {
        font-size: 13px;
        font-weight: 500;
        color: #64748B;
        flex: none;
    }

    body.page-home .header-amount-integer,
    body.page-hot-markets .header-amount-integer,
    body.page-my-predictions .header-amount-integer,
    body.page-predictions .header-amount-integer {
        font-size: clamp(20px, 6vw, 26px);
        font-weight: 700;
        line-height: 1.05;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    body.page-home .header-amount-decimal,
    body.page-hot-markets .header-amount-decimal,
    body.page-my-predictions .header-amount-decimal,
    body.page-predictions .header-amount-decimal {
        font-size: 13px;
        font-weight: 500;
        flex: none;
        white-space: nowrap;
    }

    /* 组合资金：整数黑色，小数灰黑色（$ 统一在上面共用规则里已经是灰黑色） */
    body.page-home #positionAmount .header-amount-integer,
    body.page-hot-markets #positionAmount .header-amount-integer,
    body.page-my-predictions #positionAmount .header-amount-integer,
    body.page-predictions #positionAmount .header-amount-integer {
        color: #111827;
    }

    body.page-home #positionAmount .header-amount-decimal,
    body.page-hot-markets #positionAmount .header-amount-decimal,
    body.page-my-predictions #positionAmount .header-amount-decimal,
    body.page-predictions #positionAmount .header-amount-decimal {
        color: #64748B;
    }

    /* 我的余额：整数用网站现有品牌蓝色，小数用浅灰蓝色 */
    body.page-home #balanceAmount .header-amount-integer,
    body.page-hot-markets #balanceAmount .header-amount-integer,
    body.page-my-predictions #balanceAmount .header-amount-integer,
    body.page-predictions #balanceAmount .header-amount-integer {
        color: var(--brand, #2563EB);
    }

    body.page-home #balanceAmount .header-amount-decimal,
    body.page-hot-markets #balanceAmount .header-amount-decimal,
    body.page-my-predictions #balanceAmount .header-amount-decimal,
    body.page-predictions #balanceAmount .header-amount-decimal {
        color: #93C5FD;
    }

    /* 两张卡片改用各自的边框做视觉分隔，中间不再需要一条额外竖线 */
    body.page-home .header-asset-divider,
    body.page-hot-markets .header-asset-divider,
    body.page-my-predictions .header-asset-divider,
    body.page-predictions .header-asset-divider {
        display: none;
    }

    /* 只隐藏手机版的充值按钮（不删除按钮代码/弹窗/点击事件），隐藏后不留空白列，
       两张卡片的 flex:1 自动平分释放出来的空间 */
    body.page-home .header-recharge,
    body.page-hot-markets .header-recharge,
    body.page-my-predictions .header-recharge,
    body.page-predictions .header-recharge {
        display: none;
    }

    /* 头像入口：第一行右侧，和 Logo 同一行、垂直居中 */
    body.page-home .header-user-menu,
    body.page-hot-markets .header-user-menu,
    body.page-my-predictions .header-user-menu,
    body.page-predictions .header-user-menu {
        grid-area: avatar;
        width: auto;
        justify-content: flex-end;
    }

    body.page-home .header-user-trigger,
    body.page-hot-markets .header-user-trigger,
    body.page-my-predictions .header-user-trigger,
    body.page-predictions .header-user-trigger {
        width: 34px;
        height: 34px;
    }

    /* 下拉菜单本身稍微加宽，避免"组合资金 $9,079.82"这类金额在窄屏下换行错位；
       开合/外部点击关闭/Esc 关闭/右对齐/层级（z-index:80，高于分类导航）等交互
       完全复用现有 .header-user-dropdown 实现，这里只调整宽度 */
    body.page-home .header-user-dropdown,
    body.page-hot-markets .header-user-dropdown,
    body.page-my-predictions .header-user-dropdown,
    body.page-predictions .header-user-dropdown {
        width: 208px;
    }

    /* 账户资产区域：手机版显示，放在下拉菜单最上面（我的预测/预测市场链接之上）。
       热门市场/我的预测/预测市场三个页面本轮同步在 HTML 里补上了这个区块
       （和 market-detail.html 完全相同的结构/id），真实数据渲染逻辑
       （ui.js renderHeaderMoney）本来就是按 id 是否存在写入，不需要新增 JS */
    body.page-home .header-user-dropdown-assets,
    body.page-hot-markets .header-user-dropdown-assets,
    body.page-my-predictions .header-user-dropdown-assets,
    body.page-predictions .header-user-dropdown-assets {
        display: block;
        padding: 8px 10px 10px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    body.page-home .header-user-dropdown-assets-title,
    body.page-hot-markets .header-user-dropdown-assets-title,
    body.page-my-predictions .header-user-dropdown-assets-title,
    body.page-predictions .header-user-dropdown-assets-title {
        font-size: 12px;
        font-weight: 600;
        color: #94A3B8;
        margin-bottom: 8px;
    }

    body.page-home .header-user-dropdown-asset-row,
    body.page-hot-markets .header-user-dropdown-asset-row,
    body.page-my-predictions .header-user-dropdown-asset-row,
    body.page-predictions .header-user-dropdown-asset-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    body.page-home .header-user-dropdown-asset-row + .header-user-dropdown-asset-row,
    body.page-hot-markets .header-user-dropdown-asset-row + .header-user-dropdown-asset-row,
    body.page-my-predictions .header-user-dropdown-asset-row + .header-user-dropdown-asset-row,
    body.page-predictions .header-user-dropdown-asset-row + .header-user-dropdown-asset-row {
        margin-top: 6px;
    }

    body.page-home .header-user-dropdown-asset-label,
    body.page-hot-markets .header-user-dropdown-asset-label,
    body.page-my-predictions .header-user-dropdown-asset-label,
    body.page-predictions .header-user-dropdown-asset-label {
        flex: none;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
    }

    /* 金额过长时允许在自己这一格内截断，不会撑破下拉菜单或和标签重叠 */
    body.page-home .header-user-dropdown-assets .header-amount-box,
    body.page-hot-markets .header-user-dropdown-assets .header-amount-box,
    body.page-my-predictions .header-user-dropdown-assets .header-amount-box,
    body.page-predictions .header-user-dropdown-assets .header-amount-box {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        min-width: 0;
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        color: #172033;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-home .header-user-dropdown-assets .header-amount-box .header-amount-full,
    body.page-hot-markets .header-user-dropdown-assets .header-amount-box .header-amount-full,
    body.page-my-predictions .header-user-dropdown-assets .header-amount-box .header-amount-full,
    body.page-predictions .header-user-dropdown-assets .header-amount-box .header-amount-full {
        display: inline-flex !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.page-home .header-user-dropdown-assets .header-amount-box .header-amount-mobile-label,
    body.page-hot-markets .header-user-dropdown-assets .header-amount-box .header-amount-mobile-label,
    body.page-my-predictions .header-user-dropdown-assets .header-amount-box .header-amount-mobile-label,
    body.page-predictions .header-user-dropdown-assets .header-amount-box .header-amount-mobile-label {
        display: none !important;
    }

    body.page-home .header-user-dropdown-assets .header-amount-symbol,
    body.page-hot-markets .header-user-dropdown-assets .header-amount-symbol,
    body.page-my-predictions .header-user-dropdown-assets .header-amount-symbol,
    body.page-predictions .header-user-dropdown-assets .header-amount-symbol {
        color: #64748B;
        font-weight: 500;
    }

    /* 汉堡菜单本身没有任何点击功能（全站都未绑定事件），手机版不再占用空间；
       桌面端不受影响，继续保留原有展示（本身也不会被点击触发任何行为） */
    body.page-home .menu-toggle,
    body.page-hot-markets .menu-toggle,
    body.page-my-predictions .menu-toggle,
    body.page-predictions .menu-toggle {
        display: none;
    }

    /* ---------- 第四行：分类导航压缩高度，继续横向排列+可横向滑动，文字不挤压重叠 ----------
       热门市场页的分类导航多一个"更多"下拉（.category-nav-has-more/.category-nav-row/
       .category-scroll-area），我的预测/预测市场是和首页一样的简单版本，两种 DOM 变体
       共用同一套压缩后的视觉规则，横向滚动能力来自更早已经存在的、不分页面的
       .category-list{flex-wrap:nowrap} 规则，这里不重复声明 */
    body.page-home .category-nav,
    body.page-hot-markets .category-nav,
    body.page-my-predictions .category-nav,
    body.page-predictions .category-nav {
        padding: 0.3rem 0;
    }

    body.page-home .category-btn,
    body.page-hot-markets .category-btn,
    body.page-my-predictions .category-btn,
    body.page-predictions .category-btn {
        position: relative;
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }

    body.page-home .category-more-btn,
    body.page-hot-markets .category-more-btn,
    body.page-my-predictions .category-more-btn,
    body.page-predictions .category-more-btn {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }

    /* 选中态改成轻量样式：只有文字变蓝 + 底部一条短横线，去掉整块浅蓝背景和贯穿
       整个按钮宽度的 border-bottom；点击区域（padding）不变，字号也不变，
       只是视觉指示更克制 */
    body.page-home .category-btn.active,
    body.page-hot-markets .category-btn.active,
    body.page-my-predictions .category-btn.active,
    body.page-predictions .category-btn.active {
        background-color: transparent;
        border-bottom: none;
        color: var(--brand, #2563eb);
        font-weight: 600;
    }

    /* 按钮自身宽度 = 文字宽度 + 左右各 0.65rem 固定内边距；42% 是相对按钮宽度换算出来的
       比例，实测在 2 字（首页/政治等）和 3 字（比特币）标签下都落在"文字宽度 60%-80%"
       这个目标区间内（分别约 76% 和 64%），不需要额外用 JS 按每个标签文字宽度精确计算 */
    body.page-home .category-btn.active::after,
    body.page-hot-markets .category-btn.active::after,
    body.page-my-predictions .category-btn.active::after,
    body.page-predictions .category-btn.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translateX(-50%);
        width: 42%;
        height: 2px;
        border-radius: 999px;
        background-color: var(--brand, #2563eb);
    }

    /* "更多"下拉菜单里的入口（全部市场/最新上架/即将结束/结算中/已结算）同属分类导航的
       一部分，选中态统一改成同一套规则：只保留蓝色文字，去掉整块浅蓝背景 */
    body.page-home .category-more-item.is-active,
    body.page-hot-markets .category-more-item.is-active,
    body.page-my-predictions .category-more-item.is-active,
    body.page-predictions .category-more-item.is-active {
        background-color: transparent;
        color: var(--brand, #2563eb);
        font-weight: 600;
    }

    /* ---------- 视图切换：默认（首页）显示紧凑市场列表，隐藏轮播/右侧热门市场/Footer；
       .mobile-view-hot（点击底部"热门"）时反过来。纯 CSS 显示切换，市场数据/DOM
       完全不变，不重新请求、不复制卡片 ---------- */
    body.page-home .content-left,
    body.page-home .sidebar,
    body.page-home .site-footer {
        display: none;
    }

    body.page-home.mobile-view-hot .content-left,
    body.page-home.mobile-view-hot .sidebar {
        display: block;
    }

    body.page-home.mobile-view-hot .sidebar {
        display: flex;
    }

    body.page-home.mobile-view-hot .site-footer {
        display: block;
    }

    body.page-home.mobile-view-hot .markets-section-full {
        display: none;
    }

    /* ---------- 手机版专属：搜索页（body.page-home.mobile-view-search，#mobileSearchView）
       第三个并列视图态，和上面"首页/热门"用同一套纯 CSS 显示切换机制：默认隐藏，
       进入搜索态时隐藏轮播/右侧栏/Footer/全部市场网格，只显示这一块。视觉沿用 ASFO
       Mobile Design System 既有 token（--asfo-mobile-*），不新建第二套颜色/圆角变量。
       桌面端 .mobile-search-view 本身也在下面全局默认 display:none，这里再重复一次
       hide 只是为了让"进入搜索态时隐藏其它区块"这组规则在同一处可读 ---------- */
    body.page-home.mobile-view-search .content-left,
    body.page-home.mobile-view-search .sidebar,
    body.page-home.mobile-view-search .site-footer,
    body.page-home.mobile-view-search .markets-section-full {
        display: none;
    }

    body.page-home.mobile-view-search .mobile-search-view {
        display: block;
    }

    .mobile-search-view {
        display: none;
        padding: var(--asfo-mobile-gap) var(--asfo-mobile-page-padding) 0;
        background-color: var(--asfo-mobile-bg);
    }

    .mobile-search-title {
        margin: 0 0 var(--asfo-mobile-gap);
        font-size: 17px;
        font-weight: 700;
        color: var(--asfo-mobile-text);
    }

    /* 搜索栏：图标 + 输入框 + 清除 + 取消，同一行，高度 48px、胶囊圆角、品牌蓝描边 */
    .mobile-search-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        padding: 0 14px;
        margin-bottom: calc(var(--asfo-mobile-gap) + 6px);
        background-color: var(--asfo-mobile-card);
        /* 浅灰边框（原为品牌蓝），宽度不变，避免尺寸变化 */
        border: 1.5px solid #E5E7EB;
        border-radius: 24px;
        transition: background-color 0.15s, border-color 0.15s;
    }

    /* 聚焦：背景和边框稍微加深的中性灰，不用蓝色 */
    .mobile-search-bar:focus-within {
        background-color: #F3F4F6;
        border-color: #C4C9D1;
    }

    .mobile-search-bar-icon {
        flex: none;
        display: flex;
        color: var(--asfo-mobile-blue);
    }

    .mobile-search-bar-icon svg {
        width: 18px;
        height: 18px;
    }

    .mobile-search-bar-input {
        flex: 1;
        min-width: 0;
        height: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 15px;
        color: var(--asfo-mobile-text);
    }

    .mobile-search-bar-input::placeholder {
        color: var(--asfo-mobile-muted);
        font-weight: 400;
    }

    .mobile-search-bar-clear {
        flex: none;
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 50%;
        background-color: #e5e5e5;
        color: #fff;
        font-size: 13px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* 同上一条 .mobile-search-empty[hidden] 的原因：这里也用 display:flex 覆盖了
       hidden 属性的默认 display:none，必须显式声明 [hidden] 优先级更高的规则 */
    .mobile-search-bar-clear[hidden] {
        display: none;
    }

    .mobile-search-bar-cancel {
        flex: none;
        border: none;
        background: transparent;
        color: var(--asfo-mobile-blue);
        font-size: 15px;
        font-weight: 600;
        padding: 0;
    }

    /* 热门搜索 / 最近搜索 两个模块共用的区块标题行样式 */
    .mobile-search-section {
        margin-bottom: calc(var(--asfo-mobile-gap) + 6px);
    }

    .mobile-search-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .mobile-search-section-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--asfo-mobile-text);
    }

    .mobile-search-section-icon {
        width: 16px;
        height: 16px;
        color: var(--asfo-mobile-blue);
    }

    .mobile-search-section-action {
        border: none;
        background: transparent;
        color: var(--asfo-mobile-muted);
        font-size: 13px;
        padding: 0;
    }

    .mobile-search-results-title {
        margin-bottom: 10px;
    }

    /* 热门搜索标签：胶囊形，浅蓝灰底 */
    .mobile-hot-search-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-hot-search-tag {
        height: 34px;
        padding: 0 14px;
        border: none;
        border-radius: 17px;
        background-color: #eef1fb;
        color: #4b5563;
        font-size: 13px;
        font-weight: 500;
    }

    /* 最近搜索 / 搜索结果 共用的行卡片：左缩略图 + 中间标题/元信息 + 右箭头，
       整行是真实 <a href="/market-detail.html?id=..."> 跳转，和首页市场卡片标题
       用的是同一套跳转方式，不新建点击处理逻辑 */
    .mobile-recent-search-list,
    .mobile-search-result-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-search-result-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 84px;
        padding: 10px 12px;
        background-color: var(--asfo-mobile-card);
        border: 1px solid var(--asfo-mobile-border);
        border-radius: var(--asfo-mobile-radius);
        text-decoration: none;
        color: inherit;
    }

    .mobile-search-row-thumb {
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        overflow: hidden;
    }

    .mobile-search-row-thumb-img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    .mobile-search-row-thumb-default {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-search-row-thumb-glyph {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-search-row-body {
        flex: 1;
        min-width: 0;
    }

    .mobile-search-row-title {
        font-size: 15px;
        font-weight: 600;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }

    .mobile-search-row-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--asfo-mobile-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-search-row-yes {
        color: #16A34A;
        font-weight: 600;
    }

    .mobile-search-row-dot {
        color: #d4d4d4;
    }

    .mobile-search-row-category-tag {
        padding: 2px 8px;
        border-radius: 6px;
        background-color: #f0f1f5;
        color: #6b7280;
        font-size: 11px;
    }

    .mobile-search-row-chevron {
        flex: none;
        width: 16px;
        height: 16px;
        color: #c9c9c9;
    }

    /* 无结果 / 错误 两个状态共用的居中空状态布局，图标区分（无结果=放大镜线框图标，
       错误=不放图标，只用文案区分，见十三点要求），刻意不用 404 图/哭脸/红色错误图标 */
    .mobile-search-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 56px 24px 40px;
        text-align: center;
    }

    /* [hidden] 属性本身在 UA 样式表里就是 display:none，但优先级和上面这条类选择器
       相同，源码顺序在后的类选择器会赢，导致 hidden 形同虚设——无结果/错误两个状态
       共用这个类名，必须显式声明 [hidden] 覆盖，否则两个状态会同时显示 */
    .mobile-search-empty[hidden] {
        display: none;
    }

    .mobile-search-empty-icon {
        width: 44px;
        height: 44px;
        color: #9ca3af;
        margin-bottom: 14px;
    }

    .mobile-search-empty-title {
        font-size: 14px;
        font-weight: 600;
        color: #404040;
        margin-bottom: 6px;
    }

    .mobile-search-empty-desc {
        font-size: 12px;
        color: var(--asfo-mobile-muted);
        margin-bottom: 18px;
    }

    .mobile-search-empty-clear-btn {
        height: 36px;
        padding: 0 18px;
        border: 1px solid var(--asfo-mobile-border);
        border-radius: 9px;
        background-color: var(--asfo-mobile-card);
        color: var(--asfo-mobile-blue);
        font-size: 13px;
        font-weight: 600;
    }

    /* 轮播容器左右留白，视觉上露出下一张的边缘，提示"可以左右滑动"；不改变轮播本身
       100% 宽度单张切换的既有 JS/CSS 机制（.hero-track/.hero-slide 完全不动），
       只是外层容器不再贴边撑满屏幕 */
    body.page-home.mobile-view-hot .content-left {
        padding: 0 0.6rem;
    }

    body.page-home.mobile-view-hot .sidebar::before {
        display: none;
    }

    /* 页面正文底部预留出固定底部导航的高度，避免遮挡紧凑列表最后一张卡片或
       Footer 最下面的版权行 */
    body.page-home {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
        background-color: var(--asfo-mobile-bg);
    }

    /* ---------- 紧凑市场卡片：只作用于首页 #marketsGrid（其它页面/predictions.html
       的 .pred-market-card 复用同一个 .market-card 类名，但用的是不同容器 id，
       不受这里影响）。2026-09 设计系统统一：圆角/边框/去阴影改用 ASFO Mobile token，
       目标整卡高度约 110-135px，本轮在此基础上继续瘦身内部间距 ---------- */
    body.page-home #marketsGrid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* .market-card.market-card（重复类名，不是笔误）：桌面端 .main-content:not(.is-full-width)
       #marketsGrid .market-card 这条规则不在任何媒体查询里、选择器有 3 个类选择器，
       比这里原来只有 2 个类选择器的写法优先级更高，即使在手机宽度下也会赢，导致圆角/
       边框/阴影一直被桌面规则的 16px+var(--shadow-card) 覆盖回去、这条手机覆盖形同虚设。
       重复一次类名把类选择器数量拉到同样是 3 个，靠多出的一个 body 元素选择器险胜，
       不使用 !important */
    body.page-home #marketsGrid .market-card.market-card {
        padding: 8px 12px;
        border-radius: var(--asfo-mobile-radius);
        border-color: var(--asfo-mobile-border);
        border-top-color: var(--asfo-mobile-border);
        box-shadow: none;
    }

    body.page-home #marketsGrid .market-card-meta {
        margin-bottom: 0.15rem;
    }

    body.page-home #marketsGrid .market-card-head {
        margin-bottom: 0.05rem;
        gap: 8px;
    }

    body.page-home #marketsGrid .market-card-thumb {
        width: 40px;
        height: 40px;
        border-radius: 7px;
    }

    /* 标题继续保留基础 .market-title 的 -webkit-line-clamp:2（不删除、不截断数据本身，
       只是超过两行的部分视觉上省略，完整标题仍在 DOM/详情页可见），这里只收紧行高，
       字号维持 13.6px，在你要求的 13–14px 区间内 */
    body.page-home #marketsGrid .market-title {
        font-size: 0.85rem;
        min-height: 0;
        margin-bottom: 0;
        line-height: 1.26;
        color: #333333;
    }

    /* ====================================================================
       手机版 market card 第二版重排（v2）：概率半圆仪表回到右上角展示（复用现有
       buildMarketCardRingHtml/patchMarketCard 的 SVG 弧线组件和 data-field 实时同步，
       不新增任何图表/数据逻辑，只是取消上面这条旧的 display:none），下方原来的
       "是 XX% 否 XX%" 纯文字行和"分类+倒计时"行不再重复展示（详情页/桌面端不受影响，
       DOM 和 tickLocalDisplays 倒计时逻辑都还在，只是这个手机卡片作用域内不占地方），
       改成大号 Yes/No 按钮（复用现有 .market-btn-yes/.market-btn-no 已有的浅绿/浅红配色
       和 .market-order-button 已有的 goToMarketDetail 点击跳转，未新增任何交易入口） */
    body.page-home #marketsGrid .market-card-ring-col {
        display: flex;
    }

    /* 2026-09 修复：72x43 太小，78%/99% 这类三字符百分比在 26.6px 宽的数字区域里
       已经实测溢出、和"是"文字的间距也因为两者各自叠加 translateY(8px) 而失真。
       调到 84x50（宽高比 1.68，和 SVG viewBox "0 0 40 24" 的 1.667 基本一致，不变形），
       只改视觉尺寸，不改 buildMarketCardRingHtml 的弧线计算/patchMarketCard 实时同步逻辑 */
    body.page-home #marketsGrid .market-card-ring-wrap {
        width: 84px;
        height: 50px;
    }

    /* 数字改用 px 而不是 rem，避免用户系统字体设置影响到"是否溢出"这个判断；
       27px/700，在 84px 宽的框里，"99%" 三字符实测也能完整显示、不贴边。
       translateY 从 8px 减到 4px（不是移除）：#marketsGrid .market-card-ring-center
       是 align-items:center（不是 base 规则的 flex-end），4px 只是让数字略微偏向
       半圆弧线的"腹部"视觉重心，不会把数字推出 50px 高的框外 */
    /* 27px 实测在真机截图上仍然明显压出弧线（尤其 78%/99% 这种两位数），
       缩到 22px；translateY 从 4px 降到 1px，基本居中，不再明显偏下 */
    body.page-home #marketsGrid .market-card-ring-percent {
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        color: #404040;
        transform: translateY(5px);
    }

    /* "是/否"文字不再单独叠加 translateY——它在 DOM 里本来就是 .market-card-ring-wrap
       的下一个 flex 兄弟节点（column 方向），自然排在数字下方，间距完全交给下面
       .market-card-ring-col 的 gap 控制（等同于你要的 margin-top 2–4px 间距），
       避免两层位移叠加造成的不可预测间距 */
    body.page-home #marketsGrid .market-card-ring-label {
        font-size: 11.5px;
        font-weight: 500;
        transform: none;
    }

    body.page-home #marketsGrid .market-card-ring-col {
        gap: 3px;
    }

    body.page-home #marketsGrid .market-card-mobile-meta {
        display: none;
    }

    body.page-home #marketsGrid .market-card-mobile-yn {
        display: none;
    }

    /* 大号 Yes/No 按钮：沿用现有 .market-btn-yes/.market-btn-no 的浅绿/浅红底色，
       手机端只加大点击区域和圆角，不改变颜色语义、不改变点击后跳转的 side 参数 */
    body.page-home #marketsGrid .market-buttons {
        display: grid;
        /* 桌面端这里是 22px（配合桌面放大后的仪表把按钮往下推），手机版仪表已经缩小，
           不再需要这么大的间距，压到 8px 是本轮卡片整体瘦身到 144-156px 的关键一步 */
        margin-top: 8px;
        margin-bottom: 0.3rem;
    }

    /* 按钮高度压到你给的下限 34px。注意：桌面端 #marketsGrid .market-btn 早先一轮
       改成了固定 height:41px（配合 flex 居中让两个按钮高度完全一致，见那条规则自己的
       注释），只写 min-height 不会覆盖 height，之前量出来的 41px 就是这个原因——这里
       同样用固定 height 覆盖，字号 12.5px（12–13px 区间内），横向 padding 沿用桌面的
       0.5rem 不变（横向留白不用跟着压，避免文字贴边），只压纵向 */
    body.page-home #marketsGrid .market-btn {
        height: 34px;
        padding: 0 0.5rem;
        font-size: 0.78rem;
        border-radius: 0.6rem;
    }

    body.page-home #marketsGrid .market-card {
        cursor: pointer;
    }

    /* 交易量/流动性/热度改成单行"图标+数值"（隐藏次要标签文字，只保留图标+数值本身，
       数值含义不变），把原来两行堆叠的统计列压缩成一行，是紧凑卡片高度达标的关键一步 */
    body.page-home #marketsGrid .market-stats-row-v2 {
        padding-top: 0.05rem;
        gap: 0.4rem;
        align-items: center;
        /* 删除来自基础 .market-stats-row 的灰色分隔线（border-top: 1px solid #eef0f2），
           只在手机版取消，电脑版 .market-stats-row-v2 不受这条规则影响 */
        border-top: none;
    }

    body.page-home #marketsGrid .market-stats-row-left {
        gap: 0.65rem;
        align-items: center;
    }

    body.page-home #marketsGrid .market-stats-col-v2 {
        flex-direction: row;
        align-items: center;
        gap: 0.2rem;
    }

    body.page-home #marketsGrid .market-stats-head {
        font-size: 0.7rem;
        gap: 0.1rem;
    }

    body.page-home #marketsGrid .market-stats-label {
        display: none;
    }

    body.page-home #marketsGrid .market-stats-value {
        font-size: 0.72rem;
        color: #5a5a5a;
    }

    /* 只保留成交量，流动性和市场热度手机版卡片主视图不再展示（只是 CSS 隐藏，
       liquidity/heat 数据字段、计算逻辑、详情页展示完全不受影响）。流动性列和成交量列
       共用同一个 .market-stats-col-v2 类、没有单独的类名区分，这里用 :nth-child(2)
       精确定位"排在成交量后面的那一列"：有流动性数据时第 2 列就是流动性列，
       没有流动性数据时第 2 列会是市场热度列——市场热度本身已经用自己的
       .market-stats-col-mobile-heat 类单独隐藏，两条规则叠加后两种情况都只留下成交量 */
    body.page-home #marketsGrid .market-stats-row-left .market-stats-col-v2:nth-child(2) {
        display: none;
    }

    body.page-home #marketsGrid .market-stats-col-mobile-heat {
        display: none;
    }

    body.page-home #marketsGrid .market-action-btn {
        width: 1.5rem;
        height: 1.5rem;
    }

    body.page-home #marketsGrid .market-action-btn svg {
        width: 1rem;
        height: 1rem;
    }

    /* ---------- 手机版第二批："全部市场"标题区收紧：字号 19.2px -> 16px，
       标题区到卡片列表的间距 20px -> 12px，只影响 index.html（.section-title-main/
       .section-heading-grid 只在这个页面使用），不影响桌面端 ---------- */
    body.page-home .section-title-main {
        font-size: 1rem;
    }

    body.page-home .section-heading-grid {
        margin-bottom: 0.75rem;
    }

    /* ---------- 首页手机版"热门"轮播态压缩（仅 body.page-home.mobile-view-hot 生效，
       不影响独立的 hot-markets.html 页面——两者共用同一套 .hero-* 类名，这里全部加上
       .mobile-view-hot 前缀做隔离）。目标：整张轮播卡从约 652px 压缩到约 420-460px，
       只调视觉尺寸/占位/合并 Yes-No 布局，不改轮播数据、图表数据、价格、切换逻辑 ---------- */
    body.page-home.mobile-view-hot .content-left {
        padding: 0;
    }

    body.page-home.mobile-view-hot .hero-thumb-wrap {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    body.page-home.mobile-view-hot .hero-cover-glyph {
        font-size: 1.2rem;
    }

    body.page-home.mobile-view-hot .hero-head-row {
        gap: 10px;
    }

    body.page-home.mobile-view-hot .hero-category-line {
        font-size: 0.7rem;
        margin-bottom: 0.15rem;
    }

    body.page-home.mobile-view-hot .hero-main-title {
        font-size: 1rem;
        line-height: 1.25;
    }

    body.page-home.mobile-view-hot .hero-left-col {
        padding: 12px 16px;
        gap: 4px;
    }

    /* Yes/No 从上下两大行堆叠改成同一行左右并排：标签在上、数字在下，中间一条竖线分隔，
       data-field="yesPercent"/"noPercent" 节点和 5 秒实时同步逻辑完全不变，只是外层
       .hero-outcome-row 从"整行横向 space-between"改成"整列纵向居左" */
    body.page-home.mobile-view-hot .hero-outcomes-list {
        flex-direction: row;
        gap: 16px;
        margin-top: 0;
    }

    body.page-home.mobile-view-hot .hero-outcome-row {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 0;
        border-bottom: none;
    }

    body.page-home.mobile-view-hot .hero-outcome-row:not(:last-child) {
        border-right: 1px solid var(--divider);
        padding-right: 16px;
    }

    body.page-home.mobile-view-hot .hero-outcome-label {
        font-size: 0.75rem;
    }

    body.page-home.mobile-view-hot .hero-outcome-value {
        font-size: 1.1rem;
    }

    /* 摘要区改成 2 列 2 行（原来 4 列挤在一行导致中文标签换行、行高被撑高），
       4 个真实字段（成交量/流动性/市场热度/剩余时间）完整保留，只是排布更紧凑 */
    body.page-home.mobile-view-hot .hero-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 4px;
        column-gap: 12px;
        margin-top: 2px;
        padding-top: 6px;
    }

    body.page-home.mobile-view-hot .hero-view-btn {
        margin-top: 6px;
        padding: 7px 16px;
        font-size: 0.8rem;
    }

    body.page-home.mobile-view-hot .hero-chart-col {
        padding: 10px 16px;
    }

    body.page-home.mobile-view-hot .hero-chart-col-head {
        margin-bottom: 0.3rem;
        row-gap: 0.25rem;
    }

    body.page-home.mobile-view-hot .hero-chart-legend-inline {
        gap: 0.6rem;
    }

    body.page-home.mobile-view-hot .hero-chart-head-right {
        gap: 0.35rem;
    }

    body.page-home.mobile-view-hot .hero-chart-plot-wrap {
        height: 160px;
    }

    /* ---------- 手机版底部固定导航：仅首页显示，桌面端和其它页面完全不出现 ---------- */
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        background-color: var(--surface, #fff);
        border-top: 1px solid var(--border, #e5e7eb);
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(58px + env(safe-area-inset-bottom));
    }

    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 44px;
        background: none;
        border: none;
        color: var(--text-muted, #94a3b8);
        font-size: 0.68rem;
        cursor: pointer;
        padding: 0.3rem 0;
    }

    .mobile-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .mobile-nav-item.is-active {
        color: var(--brand, #2563eb);
    }

    /* 2026-09 设计系统：本批（首页/热门）底部导航选中色统一到 ASFO Mobile 主蓝，
       只覆盖这两个页面，其余仍显示 mobile-detail/my-predictions/predictions 页面
       维持原有品牌蓝，留到各自的批次里再统一，避免本批影响未经测试的页面 */
    body.page-home .mobile-nav-item.is-active,
    body.page-hot-markets .mobile-nav-item.is-active {
        color: var(--asfo-mobile-blue);
    }
}

/* ====================================================================
   手机版市场详情页（仅 market-detail.html：body.page-market-detail + ≤768px 生效）
   ====================================================================
   桌面端布局、尺寸、位置和功能完全不变（全部规则用 body.page-market-detail 前缀限定
   作用域，其它页面没有这个 body class，不受任何影响）。
   核心思路：不新建交易系统，复用现有 #simPanel（.sim-panel）本体和 marketDetailPage.
   selectOutcome()，只是在手机宽度下：
   1. 把本来就存在、只是默认隐藏的 #marketQuickStats（Yes/No 概率 + 结束时间/状态，
      数据绑定完全不变）重新在标题下方显示出来；
   2. 新增一个底部固定 Yes/No 价格栏（价格文字通过 mobileTradeBar.js 镜像现有
      #simYesPrice/#simNoPrice 的文本，不重新计算价格）；
   3. 点击后把现有 #simPanel 整体变成底部抽屉展示，不复制表单、不改下单逻辑。
   ==================================================================== */

/* 新增元素在桌面端/非本页面永远 display:none，不占位、不影响任何现有布局 */
.mobile-trade-bar,
.mobile-trade-drawer-backdrop,
.mobile-trade-drawer-header {
    display: none;
}

@media (max-width: 768px) {
    /* ====================================================================
       第五阶段：手机版详情页视觉系统整理（UI polish，不改任何功能/数据/接口）。
       统一垂直间距节奏，避免各模块 margin/padding 各用各的数值。左右基准线经过
       实测已经是 16px（.detail-page 外层）+ 24px（.detail-card 卡片内边距）=
       40px 对齐，各主卡片和卡片内容此前就已经一致，本轮不改这两个数值，只调整
       模块内部的垂直间距和卡片内小方块（概率卡/结束时间卡）的内边距 */
    body.page-market-detail {
        --md-space-xs: 0.5rem;
        --md-space-sm: 0.75rem;
        --md-space-md: 1rem;
        --md-space-lg: 1.25rem;
        background-color: var(--asfo-mobile-bg);
    }

    /* 手机端页面主背景实际用的是 --asfo-mobile-bg（和桌面端 --page-bg 极其接近但不是
       同一个变量），这里让交易面板/市场规则卡/图表区域在手机端精确对齐这个真实背景色，
       而不是桌面端那个数值，只改背景色，不改其它任何属性。
       #orderbookToggleHeader 不放进这个列表——它本轮需要比页面背景更深一级的默认色
       （见下面单独的规则），不能和这几个元素一样直接等于页面背景 */
    body.page-market-detail .sim-panel,
    body.page-market-detail .market-rules-card,
    body.page-market-detail .chart-wrapper {
        background-color: var(--asfo-mobile-bg);
    }

    /* 订单簿收起卡片手机端适配：左右内边距换成手机统一的页面内边距
       （--asfo-mobile-page-padding），圆角换成手机统一的卡片圆角
       （--asfo-mobile-radius），和市场规则卡/相关市场卡保持同一套视觉语言。
       本轮：默认背景从"等于手机页面背景"改成 rgba(229,229,229,.35)（比手机页面背景
       --asfo-mobile-bg 略深、仍然很浅的灰），让卡片默认就能被看出来；hover 继续用
       更深一级的 --asfo-mobile-border（.8 透明度，同一个灰色，只是更浓），两级灰度
       递进，和桌面端同一个思路 */
    body.page-market-detail #orderbookToggleHeader {
        /* 和桌面端同一个道理：.orderbook-card 手机端通过 .detail-card 继承了
           --asfo-mobile-page-padding 的内边距，这里用等量负 margin 把圆角卡片背景
           顶到和 .chart-card/.market-rules-card 左右对齐，再用同样数值的 padding
           把文字/箭头拉回原位，文字位置不变 */
        margin: 0 calc(var(--asfo-mobile-page-padding) * -1);
        padding: 0.875rem var(--asfo-mobile-page-padding);
        border-radius: var(--asfo-mobile-radius);
        background-color: rgba(229, 229, 229, 0.35);
    }

    body.page-market-detail #orderbookToggleHeader:hover {
        background-color: var(--asfo-mobile-border, rgba(229, 229, 229, .8));
    }

    /* 2026-09 设计系统：页面顶部留白从共享的 .detail-page 24px 收紧到 12px，
       左右保持 16px 不变（.detail-page 本来就和热门市场页共用，这里只在
       body.page-market-detail 作用域内覆盖，不影响 hot-markets.html）。
       本轮：图标+标题上方空白偏大，顶部留白再减半到 6px（这里直接写死数值，不改
       --asfo-mobile-gap 这个全局变量本身——它还被首页等其它地方共用，改变量会牵连
       无关页面的间距），左右/底部不变 */
    body.page-market-detail .detail-page {
        padding: calc(var(--asfo-mobile-gap) / 2) var(--asfo-mobile-page-padding) 0;
    }

    /* 主卡片系统统一到 v0 token：16px 圆角、极浅边框、无阴影，内边距从 24px 收紧到 16px。
       .detail-card 同时也是 market-header-card/chart-card/orderbook-card/
       market-rules-card/"相关市场"卡片的基础类，这里一次性统一，chart-card 自己的
       内边距在下面单独覆盖（图表卡片左右保持和其它卡片一致，上下更紧） */
    body.page-market-detail .detail-card,
    body.page-market-detail .detail-panel {
        padding: var(--asfo-mobile-page-padding);
        border-radius: var(--asfo-mobile-radius);
        border-color: var(--asfo-mobile-border);
        box-shadow: none;
    }

    body.page-market-detail .detail-card h2,
    body.page-market-detail .detail-panel h2 {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
    }

    /* ====================================================================
       第二阶段：顶部压缩成两行（Logo+头像 / 单行横向分类），复用手机版首页
       body.page-home 已经验证过的同一套做法（同样的 grid-template-areas，
       同样把余额/持仓卡片移进头像下拉菜单里），这里只是给 market-detail 页面
       重新套一遍、改成 body.page-market-detail 限定作用域，不改 DOM 结构/id/
       事件绑定，也不影响首页自己的规则
       ==================================================================== */
    body.page-market-detail .navbar {
        padding: 0.4rem 0;
        box-shadow: none;
        border-bottom: 1px solid var(--border, #e5e7eb);
    }

    body.page-market-detail .navbar-container {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "logo avatar";
        column-gap: 0.5rem;
        padding: 0 0.85rem;
    }

    body.page-market-detail .navbar-logo {
        grid-area: logo;
    }

    body.page-market-detail .navbar-logo h1 {
        font-size: 1.2rem;
    }

    /* 大搜索框整行隐藏（不删除功能/代码，市场详情页本来也没有依赖它的其它入口） */
    body.page-market-detail .navbar-search {
        display: none;
    }

    body.page-market-detail .navbar-right {
        display: contents;
    }

    body.page-market-detail .header-actions {
        display: contents;
    }

    /* 组合资金/我的余额/充值这一整条大卡片行隐藏（不删除接口/计算/刷新逻辑，
       只是不在顶部直接展示）；组合资金/我的余额改到头像下拉菜单的"账户资产"里查看
       （见下面 .header-user-dropdown-assets，和手机版首页用的是同一份真实数据）。
       充值功能本身不删除、不改变，只是和手机版首页现在的处理方式保持一致——
       这张卡片整体隐藏后充值按钮也跟着不在顶部露出，用户仍可以在其它已有入口
       （如未来后台需要）访问，这里不新增/不强行找入口，只做隐藏 */
    body.page-market-detail .header-assets-bar {
        display: none;
    }

    body.page-market-detail .header-user-menu {
        grid-area: avatar;
        width: auto;
        justify-content: flex-end;
    }

    body.page-market-detail .header-user-trigger {
        width: 34px;
        height: 34px;
    }

    body.page-market-detail .header-user-dropdown {
        width: 208px;
    }

    /* 头像下拉菜单里的"账户资产"区域：和手机版首页完全同一套 DOM/id/渲染逻辑
       （ui.js updateBalanceDisplay 本来就按 id 判断要不要写入，这里只是让它可见） */
    body.page-market-detail .header-user-dropdown-assets {
        display: block;
        padding: 8px 10px 10px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    body.page-market-detail .header-user-dropdown-assets-title {
        font-size: 12px;
        font-weight: 600;
        color: #94A3B8;
        margin-bottom: 8px;
    }

    body.page-market-detail .header-user-dropdown-asset-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    body.page-market-detail .header-user-dropdown-asset-row + .header-user-dropdown-asset-row {
        margin-top: 6px;
    }

    body.page-market-detail .header-user-dropdown-asset-label {
        flex: none;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
    }

    body.page-market-detail .header-user-dropdown-assets .header-amount-box {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        min-width: 0;
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        color: #172033;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 下拉菜单里始终显示完整金额（$1,234.00），不用顶部导航窄屏下"点了才展开"的
       短标签占位样式——那是给顶部一整行都很挤的场景用的，下拉菜单本身够宽，不需要 */
    body.page-market-detail .header-user-dropdown-assets .header-amount-box .header-amount-full {
        display: inline-flex !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.page-market-detail .header-user-dropdown-assets .header-amount-box .header-amount-mobile-label {
        display: none !important;
    }

    /* 汉堡按钮本身全站都没有绑定任何点击功能，手机版详情页不再占用空间
       （和手机版首页的处理完全一致，不是本页新引入的规则） */
    body.page-market-detail .menu-toggle {
        display: none;
    }

    /* ---------- 第二行：分类导航强制单行横向滚动 ----------
       .category-list 基础样式本来就是 flex-wrap:nowrap，但站内有一条不分页面的
       @media(max-width:1024px){ .category-list{flex-wrap:wrap} } 规则会在这个宽度
       下把它改成换行——这正是详情页手机版此前"分类铺成多行"的真正原因，也是
       我的预测/预测市场两个页面本轮体检截图里"分类挤成 4 行"的同一个根因
       （这两个页面用的是和 market-detail 相同的"简单版"分类导航 DOM，没有首页/
       热门市场那个额外的 .category-scroll-area 包裹层，所以不能靠那个包裹层的
       min-width:max-content 自然避免换行，需要和 market-detail 一样单独处理）。
       这里把详情页已经验证过的修复，原样扩展给我的预测/预测市场两个页面，
       不影响其它页面在 1024px 断点下的既有换行表现，也不改分类数据源/文案/跳转逻辑 */
    body.page-market-detail .category-nav,
    body.page-my-predictions .category-nav,
    body.page-predictions .category-nav {
        overflow-x: auto;
        overflow-y: hidden;
    }

    body.page-market-detail .category-list,
    body.page-my-predictions .category-list,
    body.page-predictions .category-list {
        flex-wrap: nowrap;
    }

    body.page-market-detail .category-btn,
    body.page-my-predictions .category-btn,
    body.page-predictions .category-btn {
        flex: 0 0 auto;
    }

    /* ---------- 标题区域布局（本轮更新）：图标在左，分类+标题堆叠在图标右侧 ----------
       桌面端的 .market-header-main（flex 行：图标 + 文字块 + 收藏/分享按钮）在手机端
       直接复用，不需要再用 CSS Grid 把图片/分类/标题拆开重新摆位——分类标签现在本来就
       是 .market-header-text 内部、标题上方的子元素，flexbox 天然就是"图标在左，
       分类+标题在右、上下两行"，不用 grid-template-areas 这类额外技巧 */
    body.page-market-detail .market-header-card {
        /* 手机版标题区域连续缩小动画：原来这里是 position:relative（"吸顶"视觉完全靠
           下面一个独立的 fixed 镜像栏伪造，滚动到触发点时镜像栏瞬间显隐，就是"两个标题
           切换"跳变的来源）。现在直接让这同一张卡片在手机端也变成 sticky，贴在顶部导航
           下方，和桌面端是同一套机制，不再需要第二个标题元素。
           top 用实测的顶部导航高度（--site-top-fixed-h，mobileMarketStickyHeader.js
           负责测量/写入，和原来镜像栏使用的是同一个变量），上下 padding 随 --mh-progress
           连续收紧，左右 padding 固定不变，和桌面端共用同一份动画变量/同一套衔接方式。
           本轮：图标+标题上方空白偏大，padding-top 基准值和收紧幅度各减半（16px→8px，
           收紧幅度 8px→4px），吸顶后仍连续收紧到 4px，和原来"收紧到 0"的终点比例保持
           一致；padding-bottom 保持原样不变 */
        position: sticky;
        top: var(--site-top-fixed-h, 96px);
        z-index: 10;
        padding-top: calc((var(--asfo-mobile-page-padding) / 2) - (var(--mh-progress, 0) * 4px));
        padding-bottom: calc(var(--asfo-mobile-page-padding) - (var(--mh-progress, 0) * 8px));
        padding-left: var(--asfo-mobile-page-padding);
        padding-right: var(--asfo-mobile-page-padding);
    }

    body.page-market-detail .market-header-card h1 {
        /* 2026-09 设计系统进一步收紧：19.2px 对手机来说仍偏大，压到 16px（你要求的
           15–17px 区间），行高同步收紧，标题内容/换行逻辑完全不变，只是视觉更紧凑。
           随 --mh-progress 连续缩小到约 13.6px，不是切换成另一个标题元素 */
        font-size: calc(1rem - (var(--mh-progress, 0) * 0.15rem));
        font-weight: 700;
        line-height: 1.3;
    }

    /* ---------- 第六阶段：删除标题下方重复的 Yes/No 概率 + 结束时间/市场状态 ----------
       #marketQuickStats 全站默认 display:none（这份数据已经改在走势图图例/图表下方
       摘要栏展示，参见 .chart-price-badges / .chart-summary-bar）。上一阶段曾经在
       手机端单独放出来展示过，现在用户反馈这在手机版上和图表图例、图表摘要栏、
       底部固定交易栏三处重复，明确要求手机版删除这一整块——这里改回和桌面端一致的
       display:none，DOM/数据/JS 完全不动，#quickYesPercent 等节点依然存在、
       marketDetail.js 里写入这些节点的逻辑一个字没改，只是这个区域在手机端不再显示 */
    body.page-market-detail .market-quickstats {
        display: none;
    }

    /* 只保留结束时间/市场状态两项（用户明确要求的字段）；成交量/流动性/市场热度
       在走势图下方的摘要栏（.chart-summary-bar）已经会显示，这里隐藏避免同一个数字
       在页面里出现两次。参与人数本来就默认隐藏（不冒充 Polymarket 官方参与人数），不用改 */
    body.page-market-detail .quickstat-meta .quickstat-meta-item:nth-child(1),
    body.page-market-detail #quickLiquidityRow,
    body.page-market-detail #quickMarketHeatRow {
        display: none !important;
    }

    /* ---------- 第五阶段：Yes/No 概率卡瘦身 ----------
       只压缩内边距和"标签→数字"间距，颜色/圆角/两卡一致性/数据来源全部不变；
       数字字号保持 1.5rem 不变（用户明确要求不能改到难以阅读），视觉重点不丢 */
    body.page-market-detail .quickstat-prob {
        gap: var(--md-space-xs);
        margin-bottom: var(--md-space-xs);
    }

    body.page-market-detail .quickstat-prob-item {
        padding: 0.5rem 0.85rem;
    }

    body.page-market-detail .quickstat-prob-item .quickstat-label {
        margin-bottom: 0.05rem;
    }

    /* ---------- 结束时间 / 市场状态两个小卡片：压缩内边距，标题/数值字号统一 ----------
       两卡宽度已经由现有 grid-template-columns: repeat(2,1fr) 保证严格等宽，
       这里只收紧内边距，不改变已有的等宽结构 */
    body.page-market-detail .quickstat-meta {
        gap: var(--md-space-xs);
    }

    body.page-market-detail .quickstat-meta-item {
        padding: 0.5rem 0.7rem;
    }

    /* ---------- 第九阶段：手机版详情页图表卡片整体重构 ----------
       目标结构（自上而下）：Chart Header（当前概率 + 设置入口）→ Probability Chart（走势图）
       → Chart Controls（轻量时间范围）→ Market Overview（成交量/结束时间/市场状态/流动性/热度）。
       实现方式：.chart-card 变成纵向 flex 容器，.chart-controls-row 用 display:contents 拆开
       （复用本文件已经验证过的手法，例如 .market-header-title-row），让它原来的两个子元素——
       .chart-header-row（价格徽标+设置按钮，见下面单独的真正 flex 行规则）和
       .chart-range-switcher——直接变成 .chart-card 的 flex 子项，用 order 重新排布视觉顺序，
       不移动任何 DOM 节点、不影响 JS 的 getElementById 查找 */
    body.page-market-detail .chart-card {
        display: flex;
        flex-direction: column;
    }

    body.page-market-detail .chart-controls-row {
        display: contents;
    }

    body.page-market-detail .chart-header-row {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: var(--md-space-sm);
    }

    body.page-market-detail .chart-wrapper {
        order: 2;
    }

    body.page-market-detail .chart-legend {
        order: 3;
    }

    body.page-market-detail .chart-range-switcher {
        order: 4;
    }

    body.page-market-detail .chart-summary-bar {
        order: 5;
    }

    /* Chart Header：价格徽标现在是详情页手机版进入图表区域后第一眼看到的"当前概率"，
       视觉权重明显提高（原来是压低到 0.72rem 的图例字号），Yes/No 圆点保留、字号放大 */
    body.page-market-detail .chart-price-badges {
        gap: 1.1rem;
        width: auto;
    }

    body.page-market-detail .chart-price-badge {
        font-size: 0.85rem;
        gap: 0.4rem;
    }

    body.page-market-detail .chart-price-badge strong {
        font-size: 1.3rem;
        font-weight: 800;
    }

    body.page-market-detail .chart-price-dot {
        width: 9px;
        height: 9px;
    }

    body.page-market-detail .chart-price-change {
        font-size: 0.95rem;
        font-weight: 800;
    }

    /* 图表设置入口（⚙）：和上面的概率同一行，靠右，触控区域不小于 32px */
    body.page-market-detail .chart-settings-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border: 1px solid var(--border, #e5eaf2);
        border-radius: 999px;
        background-color: var(--surface-muted, #f8fafc);
        color: var(--text-secondary, #64748b);
        cursor: pointer;
        padding: 0;
    }

    body.page-market-detail .chart-settings-btn svg {
        width: 16px;
        height: 16px;
    }

    body.page-market-detail .chart-settings-btn:active {
        background-color: var(--border, #e5eaf2);
    }

    /* 时间范围切换：从"四个等宽厚重按钮"改成成熟金融图表常见的轻量文字型 selector——
       不再用 grid 等分撑满宽度，选中态只用浅色背景+蓝色文字区分，不改变点击逻辑/数据过滤，
       #chartRangeSwitcher 的 click 事件监听器（setupChartRangeSwitcher）完全不变 */
    body.page-market-detail .chart-range-switcher {
        display: flex;
        gap: 0.3rem;
        width: auto;
        margin: var(--md-space-xs) 0 0;
    }

    body.page-market-detail .chart-range-btn {
        padding: 0.3rem 0.7rem;
        min-height: 0;
        border: none;
        background-color: transparent;
        font-size: 0.78rem;
        border-radius: 999px;
    }

    body.page-market-detail .chart-range-btn.active {
        background-color: var(--brand-soft, #eff6ff);
        border: none;
        color: var(--asfo-mobile-blue);
    }

    /* 图例跟随图表显示模式（Yes 单线/No 单线/双线）的规则本轮已经挪到不限断点的地方
       （见上面 .chart-price-badges 附近，不再只在手机端生效），这里不用重复一份 */

    /* 本轮：是/否切换 + 显示设置两个图标按钮，手机端触控区域和范围按钮同一高度，
       设置面板宽度收窄并限制最大宽度，避免贴近右边缘时溢出屏幕 */
    body.page-market-detail .chart-icon-btn {
        width: 28px;
        height: 28px;
    }

    body.page-market-detail .chart-icon-btn svg {
        width: 14px;
        height: 14px;
    }

    body.page-market-detail .chart-settings-panel {
        width: 180px;
        max-width: calc(100vw - 32px);
        right: -8px;
    }

    /* ---------- 第七阶段：图表容器纵向瘦身 ----------
       canvas 的 clientHeight 是 marketDetail.js 里 renderTrendChart() 每次绘制时
       实时读取的真实渲染尺寸（不是 HTML 的 width/height 属性），所以这里只改 CSS
       高度，图表就会在下一次绘制时自动按新的高度重新布局，不需要额外触发重绘。
       wrapper 内边距同步收紧，配合 JS 侧改小的左右上下留白，整体高度明显降低 */
    body.page-market-detail .chart-wrapper {
        min-height: 250px;
        padding: 0.6rem 0.5rem;
        border-radius: 0.5rem;
        /* 删除图表区域外层灰色边框（本轮，和桌面端同一次调整）：原来这里只是把边框
           颜色调淡（border-color: #eef1f5），桌面基础规则已经把 border 整体去掉了，
           这里跟着改成 border: none，避免手机端单独残留一条边框线 */
        border: none;
    }

    body.page-market-detail .chart-wrapper canvas {
        height: 235px;
    }

    /* ---------- 第八阶段：终点脉冲覆盖层坐标系修正 ----------
       #chartPulseOverlay 的桌面基准规则（top:1rem; left:1rem; width:calc(100% - 2rem);
       height:320px）是 ID 选择器，优先级高于上面 .chart-wrapper canvas 的瘦身规则，
       手机版单靠瘦身规则无法覆盖它——这正是脉冲环跑到图表右下方（甚至接近市场概览区）
       的根本原因：脉冲层的真实屏幕框和主图表 canvas 的真实屏幕框对不上（top/left 偏移、
       320px 高度被拉伸进只有 235px 的显示区）。这里用同样是 body.page-market-detail 作用域
       但多了两个 class 的选择器（specificity 高于纯 ID 规则）让手机版脉冲层与主图表 canvas
       的 top/left/width/height 完全一致，二者共享同一套像素坐标系，脉冲坐标（由 marketDetail.js
       里和曲线完全相同的 toX/toPriceY 算出）才能准确落在曲线最后一个真实点上 */
    body.page-market-detail .chart-wrapper canvas#chartPulseOverlay {
        top: 0.6rem;
        left: 0.5rem;
        width: calc(100% - 1rem);
        height: 235px;
    }

    /* ---------- 第六阶段：图表下方"市场概览"重新排版（本轮重做） ----------
       站内已有一条不分页面的 @media(max-width:768px){ .chart-summary-bar{
       display:grid; grid-template-columns:1fr 1fr; } ... } 规则（约第 3213 行），
       这里继续用更高优先级的 market-detail 专属选择器整体覆盖，不改那条全局规则、
       不影响其它页面。
       本轮需求变了：市场状态/市场热度两项已经从 HTML 里整个删除，只剩 成交量/结束
       时间/流动性 三项 + 右侧 ASFO 品牌，要求"尽量保持同一行"而不是像上一版那样
       "标签一行、数值另起一行"的两行式卡片结构——所以这里改成和桌面端同一个思路的
       单行 flex（图标+标签+数值在同一行内联显示），只是把字号/间距整体收紧到适合
       手机宽度的尺寸，不再需要 grid-area 这套显式占位（三项固定顺序 + 流动性默认
       隐藏时不留空位，flex 天然处理，不需要用 grid 手动指定每一项该填哪个格子） */
    /* 三项数据（成交量+结束时间+流动性）在收紧到可读下限的字号后，自然宽度之和在很窄的
       机型上仍然可能比容器略宽（比如"结束时间"这种"83天 14小时"的较长数值）。与其在这种
       情况下裁掉或省略真实数据（违反"必须完整显示"的要求），这里改成和站内已有的分类
       横向导航栏同一个处理方式——整行可以局部横向滚动（不是裁切、不是省略号），数据
       永远完整存在，只是极端情况下需要在这一行内小幅滑动查看；这不是"页面横向溢出"
       （document.body 的宽度不受影响，滚动被完全包含在这一行自己的盒子里） */
    body.page-market-detail .chart-summary-bar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.45rem;
        margin-top: var(--md-space-sm);
        padding-top: var(--md-space-sm);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.page-market-detail .chart-summary-bar::-webkit-scrollbar {
        display: none;
    }

    /* 本轮修正：成交量/结束时间/流动性这三项数据是必须始终完整显示的内容
       （不允许出现省略号），真正"空间不够先让谁收缩"的应该是最右边的品牌展示——
       所以这里把三项统计 flex-shrink 改成 0（绝不压缩/绝不截断数值），
       取消原来挂在 .chart-summary-value 上的 text-overflow:ellipsis；
       品牌区域改用下面两级窄屏 @media 直接整体隐藏（不是靠 flex 连续压缩），
       这样"三项数据始终完整 + 品牌按宽度分级收起"是两种互不干扰的独立机制 */
    body.page-market-detail .chart-summary-item {
        display: inline-flex;
        align-items: center;
        gap: 0.22rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    body.page-market-detail .chart-summary-icon {
        font-size: 0.7rem;
    }

    body.page-market-detail .chart-summary-label {
        font-size: 0.66rem;
        white-space: nowrap;
    }

    body.page-market-detail .chart-summary-value {
        font-size: 0.72rem;
        white-space: nowrap;
    }

    body.page-market-detail .chart-summary-brand {
        gap: 0.2rem;
        flex-shrink: 0;
    }

    body.page-market-detail .chart-summary-brand-logo {
        font-size: 0.7rem;
    }

    body.page-market-detail .chart-summary-brand-name {
        font-size: 0.64rem;
    }

    /* 主体内容底部留出空间，避免被下面两层固定栏（Yes/No 交易栏 + 全局四项主导航）
       遮住最后一段内容（相关市场卡片）。两层的真实高度由 mobileTradeBar.js 用
       getBoundingClientRect() 实测后写入 --mobile-trade-bar-h / --mobile-bottom-nav-h
       这两个 CSS 变量，这里不写死数字；var() 的第二个参数只是 JS 还没跑之前的
       兜底值，不是最终依据的高度 */
    body.page-market-detail .market-layout-left {
        /* 2026-09 设计系统：一级模块间距进一步收紧到 v0 统一的 12px（原来是 20px），
           其余留白（sticky/底部栏相关）不变 */
        gap: var(--asfo-mobile-gap);
        padding-bottom: calc(var(--mobile-trade-bar-h, 70px) + var(--mobile-bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* 图表卡片和市场信息卡使用同一套设计语言（背景/圆角/边框/阴影本来就共用
       .detail-card 基础类，已经一致），这里进一步把左右内边距也收紧到和其它卡片
       一致的 16px（原来左右单独维持 24px，和别的卡片基准线对不齐） */
    body.page-market-detail .chart-card {
        padding: var(--asfo-mobile-gap) var(--asfo-mobile-page-padding);
    }

    /* ---------- 底部固定 Yes/No 交易入口 ----------
       位于全局四项主导航正上方（bottom 用实测的导航高度，不是 0），两层各自独立、
       不重叠、不覆盖。抽屉打开时隐藏这条（抽屉本身固定在同一层，会盖住它，
       这里直接隐藏避免焦点/点击区域重叠）。安全区留给下面的主导航自己处理，
       这里不用再重复加一遍 safe-area padding */
    body.page-market-detail .mobile-trade-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--mobile-bottom-nav-h, 58px);
        z-index: 1200;
        gap: 0.7rem;
        padding: 0.6rem 0.9rem;
        background-color: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.08);
    }

    body.page-market-detail.mobile-trade-drawer-open .mobile-trade-bar {
        display: none;
    }

    .mobile-trade-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 50px;
        border: none;
        border-radius: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        color: #ffffff;
    }

    .mobile-trade-btn-label {
        font-size: 0.9rem;
    }

    .mobile-trade-btn-price {
        font-size: 1.05rem;
    }

    /* 绿色 Yes/是、红色 No/否，和现有 .sim-outcome-yes.active/.sim-outcome-no.active
       选中态用的是同一组 --profit/--loss 变量，颜色和全站其它 Yes/No 强调色完全一致 */
    .mobile-trade-btn-yes {
        background-color: var(--profit);
    }

    .mobile-trade-btn-no {
        background-color: var(--loss);
    }

    /* ---------- 底部抽屉：复用现有 #simPanel，不新建交易组件 ----------
       关闭状态：.market-layout-right 直接 display:none（1024px 断点已有的
       position:static 规则仍然生效，只是这里进一步整体隐藏，不在手机端占用
       文档流末尾的一整块空间）。
       打开状态（body 加 mobile-trade-drawer-open）：.market-layout-right 恢复显示，
       #simPanel 本体变成贴底抽屉，内部所有输入框/按钮/事件绑定完全不变。 */
    body.page-market-detail .market-layout-right {
        display: none;
    }

    body.page-market-detail.mobile-trade-drawer-open .market-layout-right {
        display: block;
    }

    /* 交易抽屉同样停在全局四项主导航上方（不是 0），保证用户展开抽屉交易时
       底部导航仍然可见、可点，两层互不覆盖；安全区交给主导航自己的 padding 处理，
       这里不用再叠加一次 */
    body.page-market-detail.mobile-trade-drawer-open #simPanel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--mobile-bottom-nav-h, 58px);
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
        z-index: 1800;
        padding-bottom: 1.1rem;
    }

    body.page-market-detail.mobile-trade-drawer-open .mobile-trade-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.6rem;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid var(--divider);
    }

    .mobile-trade-drawer-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #111827;
    }

    body.page-market-detail.mobile-trade-drawer-open .mobile-trade-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--modal-overlay-bg);
        z-index: 1799;
    }

    /* 订单簿可折叠规则（桌面+手机通用版）已移到上面 .orderbook-card 所在的非媒体查询
       区块，这里不再需要手机专属的一份，避免两处重复定义互相覆盖 */

    /* 2026-09："市场规则"改成默认只显示预览文字 + 行内"……展开"（不再用 max-height/
       line-clamp 裁切整个内容区域，见 marketDetail.js renderRulesCollapsed 注释），
       上面这一版的 .is-clamped 手机专属高度规则已经不再需要，同时移除。
       手机端宽度不够，开放时间/结束时间改成一行一个，看起来更清楚 */
    body.page-market-detail .market-rules-time-row {
        flex-direction: column;
        gap: 6px;
    }

    /* ---------- 第九阶段：图表设置 bottom sheet ----------
       复用首页好友推荐/通知中心已经验证过的同一套贴底抽屉视觉语言
       （.mobile-sheet-header/title/close/body 是同样的 class 名，这里在
       body.page-market-detail 作用域下单独声明一遍同样的样式，两边互不影响） */
    body.page-market-detail .chart-mode-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--modal-overlay-bg);
        z-index: 2000;
    }

    body.page-market-detail .chart-mode-sheet.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 60vh;
        background-color: #fff;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
        z-index: 2001;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.page-market-detail .mobile-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--divider, #eef1f5);
        flex: none;
    }

    body.page-market-detail .mobile-sheet-title {
        font-size: 1rem;
        font-weight: 700;
        color: #111827;
    }

    body.page-market-detail .mobile-sheet-close {
        border: none;
        background: transparent;
        font-size: 1.3rem;
        line-height: 1;
        color: #9ca3af;
        cursor: pointer;
        padding: 0.3rem 0.45rem;
        border-radius: 0.4rem;
    }

    body.page-market-detail .mobile-sheet-body {
        padding: 1rem;
    }

    body.page-market-detail .chart-mode-option-label {
        font-size: 0.8rem;
        color: var(--text-muted, #94a3b8);
        margin-bottom: 0.6rem;
    }

    body.page-market-detail .chart-mode-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    body.page-market-detail .chart-mode-option {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--border, #e5eaf2);
        border-radius: 0.65rem;
        background-color: #fff;
        font-size: 0.9rem;
        color: var(--text-primary, #111827);
        cursor: pointer;
        text-align: left;
    }

    body.page-market-detail .chart-mode-option.active {
        border-color: var(--brand, #2563eb);
        background-color: var(--brand-soft, #eff6ff);
        color: var(--brand, #2563eb);
        font-weight: 700;
    }

    body.page-market-detail .chart-mode-option-dots {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    body.page-market-detail .chart-mode-dot {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        display: inline-block;
    }

    body.page-market-detail .chart-mode-dot-yes {
        background-color: #16A34A;
    }

    body.page-market-detail .chart-mode-dot-no {
        background-color: #DC2626;
    }

    /* ====================================================================
       2026-09 设计系统第二批：交易面板（#simPanel）手机版视觉
       ====================================================================
       #simPanel 在手机端本来就是贴底抽屉（见上面 .mobile-trade-drawer-open 相关规则），
       抽屉的"是否打开/定位/圆角/阴影"已经在更早一轮做好，这里第一次单独给面板内部的
       表单元素（买入卖出/Yes-No/订单类型/价格输入/份额输入/快捷金额/持仓周期/预览/
       提交按钮/查看持仓入口）加手机专属样式——此前完全没有 body.page-market-detail
       .sim-* 规则，抽屉内部这些元素之前用的是和桌面端一模一样的尺寸。
       只改字号/内边距/圆角/颜色/高度这些纯视觉属性，不改变任何 id、事件绑定、
       校验逻辑、计算逻辑、data-* 属性，marketDetail.js 一行未动。 */
    body.page-market-detail #simPanel {
        padding: var(--asfo-mobile-page-padding);
        border-radius: var(--asfo-mobile-radius);
        border-color: var(--asfo-mobile-border);
        box-shadow: none;
        gap: 0.6rem;
    }

    body.page-market-detail .sim-market-summary-image {
        width: 44px;
        height: 44px;
        max-width: 44px;
        max-height: 44px;
    }

    body.page-market-detail .sim-market-summary-title {
        font-size: 0.85rem;
    }

    body.page-market-detail .sim-market-summary-outcome {
        font-size: 0.78rem;
    }

    /* 买入/卖出下划线 Tab：字号收进 13–14px 区间，其余（下划线选中态/颜色）不变 */
    body.page-market-detail .sim-side-tabs .sim-tab {
        padding: 0.4rem 0.1rem 0.5rem;
        font-size: 0.85rem;
    }

    body.page-market-detail .sim-current-position-shares {
        font-size: 1.1rem;
    }

    body.page-market-detail .sim-current-position-label,
    body.page-market-detail .sim-current-position-pnl {
        font-size: 0.72rem;
    }

    body.page-market-detail .sim-more-entry {
        font-size: 0.75rem;
    }

    /* Yes/No 大按钮：高度收进 36–40px 区间（原来靠内容撑高，约 42px+），圆角保持
       0.6rem(约 9.6px，已经在 8–10px 区间内)，字号 13px，继续保留浅色未选中/
       实心绿-红选中两种状态，不改成品牌蓝、不做成大面积纯色块（按钮本身不大） */
    body.page-market-detail .sim-outcome-buttons {
        gap: 0.5rem;
    }

    body.page-market-detail .sim-outcome-btn {
        min-height: 38px;
        padding: 0.4rem 0.75rem;
        font-size: 0.82rem;
    }

    body.page-market-detail .sim-outcome-btn strong {
        font-size: 0.92rem;
    }

    /* 市价/限价：胶囊按钮字号/内边距压缩，圆角保持胶囊形状不变（这是切换器本身的
       既有形状语言，不是"大胶囊按钮"，不在本次要压缩的按钮之列） */
    body.page-market-detail .sim-type-tabs .sim-type-tab {
        padding: 0.32rem 0.8rem;
        font-size: 0.75rem;
    }

    body.page-market-detail .sim-field-label,
    body.page-market-detail .sim-field label {
        font-size: 0.75rem;
    }

    body.page-market-detail .sim-field {
        gap: 0.3rem;
    }

    /* 限价单价格步进框：36px 方形步进按钮收到 32px，输入字号收到 14px 左右，
       圆角/边框保持现有 0.5rem(8px) 不变 */
    body.page-market-detail .sim-step-btn {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    body.page-market-detail .sim-input {
        padding: 0.45rem 0.4rem;
        font-size: 0.9rem;
    }

    /* 金额/份额大数字输入：不是传统边框输入框（现有设计本来就是无边框、贴着行内联的
       大号数字，JS 按内容动态测宽），这里保留这个已经验证过的视觉语言，只把字号从
       32px 收到约 26px，让整行更紧凑，不强行套用"边框输入框"样式改变其视觉性质 */
    body.page-market-detail .sim-trade-input-row {
        padding: 0.5rem 0;
    }

    body.page-market-detail .sim-trade-input-label {
        font-size: 0.8rem;
    }

    body.page-market-detail .sim-input-prefix,
    body.page-market-detail .sim-input-shares {
        font-size: 1.5rem;
    }

    /* 金额/份额输入框在手机端会同时命中上面 body.page-market-detail .sim-input 的左右
       内边距（那条规则是给限价 stepper 输入框 #simPrice 用的，但 #simShares 同时也带
       .sim-input 类，选择器 body.page-market-detail .sim-input 的特异性比基础规则
       .sim-input-shares 高，会盖掉基础规则里的 padding:0.2rem 0，重新把水平内边距
       挤回来），实测就是"输入1000后数字显示不完整"的真正原因——不是数字本身太宽，
       是可用宽度被这份意外重新引入的左右 padding 吃掉了一截。这里显式清零水平内边距，
       并给一个手机端最小可用宽度（空值时也有正常输入框的观感，不会窄成一条缝），
       大额输入允许继续按内容扩宽，上限 140px（超出后走原生横向滚动，不裁字） */
    body.page-market-detail .sim-input-shares {
        padding: 0.2rem 0;
        min-width: 96px;
        max-width: 140px;
    }

    /* 快捷金额：从胶囊(999px)改成 8px 圆角，字号收到 11–12px，高度收进 30–34px 区间；
       单行 4 列（100/500/1000/最大），不再继承上面通用 640px 断点里 2 列的规则——
       那条通用规则特异性更低，但没有被这里覆盖过 grid-template-columns，实际会
       "赢"在这个字段上，导致手机版交易面板的快捷金额一直是 2 列而不是设计要求的单行 4 列 */
    body.page-market-detail .sim-quick-buttons {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    body.page-market-detail .sim-quick-btn {
        min-height: 32px;
        padding: 0.3rem 0.2rem;
        border-radius: 8px;
        font-size: 0.72rem;
    }

    /* 持仓周期：标签/下拉框同一行不变，字号收进 12–13px 区间，内边距收紧 */
    body.page-market-detail #simExpiryField label {
        font-size: 0.78rem;
    }

    body.page-market-detail .sim-expiry-trigger {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
    }

    body.page-market-detail .sim-expiry-option {
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
    }

    /* 无持仓卖出状态：紧凑成一行说明（文字 + "查看待成交订单"），状态区整体控制在
       40–52px，不改变"是否显示这个区块"本身的判断逻辑（继续由 marketDetail.js 按
       真实可卖份额决定 display） */
    body.page-market-detail .sim-sellable-empty {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        text-align: left;
        box-sizing: border-box;
        min-height: 40px;
    }

    body.page-market-detail .sim-sellable-empty p {
        font-size: 12px;
        line-height: 20px;
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    body.page-market-detail .sim-sellable-view-pending {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 6px;
    }

    /* 预览区域：进一步压缩内边距和行间距，不改变计算逻辑。重要结果数字
       （.sim-preview-row-primary/.sim-preview-row-shares 的 strong）现在的桌面基础值
       已经从原来的 1.6rem 收到 1.3rem（约 18-22px 区间），手机端沿用这个基础值，
       不需要再单独覆盖 */
    body.page-market-detail .sim-preview {
        padding: 0.65rem 0.75rem;
        font-size: 0.78rem;
    }

    body.page-market-detail .sim-preview-row {
        padding: 0.2rem 0;
    }

    body.page-market-detail .sim-preview-row span {
        font-size: 0.78rem;
    }

    body.page-market-detail .sim-preview-row strong {
        font-size: 0.95rem;
    }

    body.page-market-detail .sim-preview-note {
        font-size: 0.7rem;
        margin-top: 0.3rem;
        padding-top: 0.3rem;
    }

    /* 提交按钮：桌面端旧样式是 #2563eb + 蓝色发光阴影 + 约 10px 圆角，手机版改成
       v0 主蓝 #3b5bff、48px 高、12px 圆角、15px/600 字重、无阴影；文字内容继续由
       marketDetail.js 动态写入（"买入 是"/"卖出 否"等），click handler 完全不变 */
    body.page-market-detail .sim-submit-btn {
        height: 48px;
        padding: 0;
        background-color: var(--asfo-mobile-blue);
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: normal;
        box-shadow: none;
    }

    body.page-market-detail .sim-submit-btn:hover {
        background-color: var(--asfo-mobile-blue);
        box-shadow: none;
    }

    body.page-market-detail .sim-submit-btn:active {
        transform: none;
        opacity: 0.9;
        box-shadow: none;
    }

    body.page-market-detail .sim-submit-btn:disabled,
    body.page-market-detail #simPreview[style*="display: none"] + .sim-submit-btn:not(:disabled) {
        background-color: #a9b8ff;
        box-shadow: none;
    }
}

/* 图表设置 bottom sheet：非手机版详情页永远不可见，不占位 */
.chart-mode-backdrop,
.chart-mode-sheet {
    display: none;
}

/* ====================================================================
   第一阶段 App Shell：热门市场 / 我的预测 / 预测市场 三个页面的手机版内容区
   ====================================================================
   Header/分类导航的手机版排版已经在上面 body.page-home 相关规则里通过扩展选择器
   复用（不是另外重写），这里只处理这三个页面各自内容区域的手机版布局，
   以及三个页面共用的、底部主导航需要的内容区留白。不改变任何筛选/排序/搜索/
   持仓/结算逻辑，只调整展示层。
   ==================================================================== */

/* 手机版筛选入口按钮 / 筛选面板标题栏(关闭按钮那一行) / 热门市场筛选面板遮罩：
   默认（含桌面端）隐藏，只在下面 768px 断点内显示。必须写在 @media 块前面——
   CSS 特异度和里面的显示规则完全一样（都是 body.page-hot-markets 单个类前缀），
   两条规则谁在源码里更靠后谁生效，写在后面会导致断点内的"显示"规则反而被
   这条"隐藏"规则覆盖 */
body.page-hot-markets .hot-page-filter-toggle-btn {
    display: none;
}

body.page-hot-markets .hot-page-filter-sheet-header {
    display: none;
}

.hot-page-filter-backdrop {
    display: none;
}

@media (max-width: 768px) {
    /* ---------- 三个页面共用：主内容区底部留出主导航高度，不被遮挡 ---------- */
    body.page-hot-markets .hot-markets-page,
    body.page-my-predictions .mypred-page,
    body.page-predictions .pred-page {
        padding-bottom: calc(var(--mobile-bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + var(--mobile-section-gap));
    }

    /* ---------- 热门市场页：2026-09 设计系统对齐（页面背景/模块间距/列表卡片化），
       只新增/覆盖 body.page-hot-markets 专属选择器，不动上面三页共用的那条规则 ---------- */
    body.page-hot-markets {
        background-color: var(--asfo-mobile-bg);
    }

    body.page-hot-markets .hot-markets-page {
        padding-top: var(--asfo-mobile-gap);
    }

    body.page-hot-markets .hot-page-header {
        margin-bottom: var(--asfo-mobile-gap);
    }

    body.page-hot-markets .hot-page-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    body.page-hot-markets .hot-page-header h2 {
        font-size: 1.15rem;
        margin-top: 0;
    }

    /* 手机版专用筛选入口按钮：桌面端右侧筛选栏常驻显示，不需要这个按钮，见下方
       body.page-hot-markets .hot-page-filter-toggle-btn 的桌面隐藏规则（写在
       媒体查询外面，因为需要对所有宽度默认隐藏，只在这个断点里显示） */
    body.page-hot-markets .hot-page-filter-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        flex: none;
        height: var(--mobile-control-height, 44px);
        padding: 0 0.9rem;
        border: 1px solid var(--border, #e5eaf2);
        border-radius: 999px;
        background-color: var(--surface-muted, #f8fafc);
        color: var(--text-secondary, #64748b);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    body.page-hot-markets .hot-page-filter-toggle-btn svg {
        width: 16px;
        height: 16px;
    }

    /* 列表单列占满宽度，不再和筛选栏并排（复用站内已有的 @media(max-width:760px)
       .hot-page-layout{flex-direction:column} 规则本来就会生效，这里只是确认
       宽度占满、去掉不需要的间距） */
    body.page-hot-markets .hot-page-layout {
        gap: 0;
    }

    body.page-hot-markets .hot-page-list-col {
        flex: 1 1 100%;
    }

    /* 筛选栏改成贴底 bottom sheet：默认在视口外（translateY(100%)），
       .is-open 时滑入。和全站已经验证过的 .mobile-sheet-* 视觉语言一致
       （圆角/关闭按钮/遮罩），复用同一套设计语言，不是新发明的浮层样式 */
    body.page-hot-markets .hot-page-filter-col {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-width: none;
        max-height: 75vh;
        border-radius: var(--mobile-sheet-radius, 1rem) var(--mobile-sheet-radius, 1rem) 0 0;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
        z-index: 2001;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.2s ease;
        padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    }

    body.page-hot-markets .hot-page-filter-col.is-open {
        transform: translateY(0);
    }

    body.page-hot-markets .hot-page-filter-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.6rem;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid var(--divider, #eef1f5);
    }

    body.page-hot-markets .hot-page-filter-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--modal-overlay-bg);
        z-index: 2000;
    }

    /* ---------- 热门市场列表整体卡片化：hotMarketsPage.js 渲染的是行列表（.hot-modal-row
       之间用 border-bottom 分隔），不是像首页 .market-card 那样的独立卡片网格，DOM 结构
       本轮不改（改 hotMarketsPage.js 渲染逻辑风险更高、超出"只调视觉"范围）。这里把
       #hotMarketsPageList 本身包成一张白色卡片（复用"我"页面「更多功能」同款"卡片包裹
       多行列表"视觉语言），行与行之间的分隔线颜色统一成 ASFO Mobile token，
       从而在不改 JS/DOM 的前提下让热门市场列表具备和首页市场卡一致的卡片系统视觉 ---------- */
    body.page-hot-markets .hot-page-list {
        background-color: var(--asfo-mobile-card);
        border: 1px solid var(--asfo-mobile-border);
        border-radius: var(--asfo-mobile-radius);
        padding: 0 var(--asfo-mobile-page-padding);
        overflow: hidden;
    }

    body.page-hot-markets .hot-modal-row {
        border-bottom-color: var(--asfo-mobile-divider);
    }

    body.page-hot-markets .hot-page-list > .hot-modal-row:last-child {
        border-bottom: none;
    }

    /* ---------- 热门市场列表行：桌面 7 列密集表格（44+84+1fr+96+96+84+16px，
       仅固定列宽和间距合计就已经超过 390px 手机宽度，这正是本轮体检发现的
       真实横向溢出根因）在手机端重排成 2 行卡片式布局，复用同一批既有 DOM 节点
       （不改 hotMarketsPage.js 的渲染逻辑/数据/事件绑定，只用 grid-template-areas
       重新摆放位置），视觉上向首页市场卡片的信息层级靠拢：缩略图+分类/标题一行，
       成交量/流动性/Yes-No 占比另起一行 ---------- */
    body.page-hot-markets .hot-modal-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb category category side"
            "thumb title    title    side"
            "gap   stat1    stat2    arrow";
        column-gap: 0.6rem;
        row-gap: 0.15rem;
        padding: 0.55rem 0;
    }

    body.page-hot-markets .hot-modal-row-thumb {
        grid-area: thumb;
        width: 40px;
        height: 40px;
    }

    body.page-hot-markets .hot-modal-row-category {
        grid-area: category;
    }

    body.page-hot-markets .hot-modal-row-title {
        grid-area: title;
    }

    /* 修复：两个 .hot-modal-row-stat（成交量/流动性）此前用 :nth-of-type(1)/(2) 选择，
       但 :nth-of-type 是按"同标签名的第 N 个兄弟节点"计数，不是"同 class 的第 N 个"——
       .hot-modal-row 里第 1/2 个 <div> 其实是缩略图和分类，根本不是这两个 stat，
       导致 grid-area:stat1/stat2 从未真正生效，两个 stat 退回浏览器默认的网格自动
       排布，被挤进只有 44px 宽的缩略图列，文字横向溢出到相邻区域——这正是"交易量"
       和"流动性"互相覆盖的真实原因。改用"紧跟在标题后面的 stat" / "紧跟在第一个
       stat 后面的 stat"这种结构选择器，不依赖标签计数，稳定对应到正确的两个节点 */
    body.page-hot-markets .hot-modal-row-title + .hot-modal-row-stat {
        grid-area: stat1;
    }

    body.page-hot-markets .hot-modal-row-title + .hot-modal-row-stat + .hot-modal-row-stat {
        grid-area: stat2;
    }

    /* 交易量/流动性数字属于重要市场数据，禁止用 ellipsis/overflow:hidden 截断，
       也不允许"标签"和"数值"这两个本应是同一个指标的部分被拆成两行——label/value
       在这里必须始终同一行（flex-wrap:nowrap），真正放不下时由外层网格整体切换成
       上下两行布局（见下面 360px 断点），而不是在指标内部把图标和数值拆开 */
    body.page-hot-markets .hot-modal-row-stat {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        text-align: left;
        min-width: 0;
    }

    /* 用固定图标替换"交易量"/"流动性"中文文字，释放横向空间给数字本身。
       不改 hotMarketsPage.js 的 DOM/数据，原始中文文字节点仍然存在（用 font-size:0
       在视觉上收起），只是用 ::before 在同一个 label 节点上叠加一个图标——
       stat1（紧跟在标题后面的第一个 .hot-modal-row-stat）固定是成交量，
       stat2（第二个）固定是流动性，全站排序/数据来源不变，图标语义固定不会因
       市场不同而变化。项目里没有现成的成交量/流动性专用 SVG（详情页图表摘要栏
       用的也是 $ 文本符号和 💧 emoji），这里流动性沿用同一个 💧，成交量沿用你
       指定的 📊，不引入新的 icon 库 */
    body.page-hot-markets .hot-modal-row-title + .hot-modal-row-stat .hot-modal-row-stat-label {
        font-size: 0;
        flex: none;
        display: inline-flex;
        align-items: center;
    }

    body.page-hot-markets .hot-modal-row-title + .hot-modal-row-stat .hot-modal-row-stat-label::before {
        content: '📊';
        font-size: 14px;
        line-height: 1;
    }

    body.page-hot-markets .hot-modal-row-title + .hot-modal-row-stat + .hot-modal-row-stat .hot-modal-row-stat-label {
        font-size: 0;
        flex: none;
        display: inline-flex;
        align-items: center;
    }

    body.page-hot-markets .hot-modal-row-title + .hot-modal-row-stat + .hot-modal-row-stat .hot-modal-row-stat-label::before {
        content: '💧';
        font-size: 14px;
        line-height: 1;
    }

    /* 视觉层级修正：数字本身此前继承了 .hot-modal-row-stat-value 基础规则里的
       深色（var(--text-primary) #111827），和市场标题（0.92rem/600/--text-primary）
       几乎同一视觉权重，看起来像"同一级信息"。这里改用站内已有的
       --text-secondary（#64748B，正是你建议的三个颜色之一），字重从 600 降到 500，
       和标题的 600 拉开区分；字号维持 14px（已经在你要求的 14~15px 区间），
       依旧禁止 nowrap 之外的任何截断手段，数字保持完整 */
    body.page-hot-markets .hot-modal-row-stat-value {
        white-space: nowrap;
        min-width: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary, #64748B);
    }

    body.page-hot-markets .hot-modal-row-side {
        grid-area: side;
        justify-content: center;
    }

    body.page-hot-markets .hot-modal-row-arrow {
        grid-area: arrow;
        align-self: center;
        justify-self: end;
    }

    /* ---------- 我的预测页：资产统计缩小，突出记录卡片 ---------- */
    body.page-my-predictions .mypred-page-header h2 {
        font-size: 16px;
    }

    body.page-my-predictions .mypred-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mobile-section-gap);
    }

    /* 4 张统计卡合成一张卡：外层容器本身就是卡片（背景/边框/圆角/阴影），每一格去掉
       自己的边框/阴影/圆角，用 1px gap + 容器背景色露出的缝隙当分隔线——这种做法
       不依赖 nth-child 数格子，2 格/4 格（已结算/盈亏两张卡按数据决定是否显示，
       :nth-child 是按 DOM 位置算的，不知道兄弟节点是不是 display:none，用它画边框
       在隐藏格子的场景下会画错位置)都能正确显示分隔线，不需要跟着显示状态调整逻辑。
       整体高度目标 112–120px（2 行 × 每行约 56px + 分隔线/边框） */
    body.page-my-predictions .mypred-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background-color: var(--border);
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    }

    body.page-my-predictions .mypred-stat-card {
        height: auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background-color: var(--surface);
        padding: 10px 12px;
        gap: 2px;
    }

    body.page-my-predictions .mypred-stat-label {
        font-size: 11px;
        line-height: 14px;
    }

    body.page-my-predictions .mypred-stat-value {
        font-size: 16px;
        line-height: 20px;
    }

    /* Tab 横向可滑动，不再挤压换行；筛选下拉紧凑排列，宽度按内容自适应而不是
       和桌面端一样撑满整行三等分。字号收紧、tab 间距从 24px 收到 8px，
       但 .mypred-tab 本身的 height:44px（见桌面基础规则）保持不变，点击区域不缩小 */
    body.page-my-predictions .mypred-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 8px;
    }

    body.page-my-predictions .mypred-tab {
        flex: none;
        white-space: nowrap;
        font-size: 13px;
        padding: 0 0.4rem;
    }

    body.page-my-predictions .mypred-filters {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    body.page-my-predictions .mypred-filter-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 空状态：padding 从 48px 24px 收紧到 24px 16px，不改文案/按钮跳转逻辑 */
    body.page-my-predictions .mypred-empty {
        padding: 24px 16px;
    }

    /* 记录卡片：padding 从 18px 20px 收紧到 14px 16px，纵向内部间距也跟着收紧，
       字段/数据本身一个都不删，只是让卡片本身不再有多余留白 */
    body.page-my-predictions .mypred-card {
        padding: 14px 16px;
        gap: 0.6rem;
    }

    body.page-my-predictions .mypred-card-main {
        gap: 0.6rem;
    }

    body.page-my-predictions .mypred-fields {
        gap: 0.4rem 1rem;
    }

    /* 展开态（成交明细/独立持仓批次/结算发票）是纵向空间浪费最严重的地方：
       每一笔独立持仓下面固定 6 个字段（投入/成交价/当前价格/成交时间/到期时间/
       剩余时间），下面 480px 断点原来把这些字段全部改成单列纵向堆叠，6 个字段
       堆成 6 行，是展开态偏高的主要原因。这里改成 2 列，字段数量、显示的批次/
       倒计时/盈亏/成交时间/到期时间全部保留，只是横向多排一个，纵向少堆一半 */
    body.page-my-predictions .mypred-lotgroup-expand,
    body.page-my-predictions .mypred-trades-breakdown,
    body.page-my-predictions .mypred-invoice {
        padding-top: 0.6rem;
        gap: 0.45rem;
    }

    body.page-my-predictions .mypred-lot-row {
        padding: 0.5rem 0.65rem;
        gap: 0.4rem;
    }

    body.page-my-predictions .mypred-lot-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem 0.75rem;
    }

    body.page-my-predictions .mypred-trade-row {
        padding: 0.4rem 0.6rem;
        gap: 0.3rem 1rem;
    }

    body.page-my-predictions .mypred-invoice-row {
        padding: 0.22rem 0;
    }

    /* ---------- 预测市场页：三个板块（市场列表/我的预测记录/结算记录）标题层级统一，
       搜索框和站内其它手机端输入框一致宽度，不再使用桌面端写死的 480px 上限 ---------- */
    body.page-predictions .pred-page-header h2 {
        font-size: 1rem;
    }

    body.page-predictions .pred-section h3 {
        font-size: 0.95rem;
    }

    body.page-predictions .pred-section .navbar-search {
        display: flex !important;
        max-width: none !important;
        width: 100%;
    }

    /* ---------- 手机版第二批：统计概览（我的统计）从 8 张各自独立带边框/阴影的卡片
       （约 495px）合成一张白色圆角卡，内部 4 列 x 2 行，和 my-predictions.html
       .mypred-stats-grid 同一套"背景色露缝当分隔线"手法，8 个真实统计字段
       （总预测数/进行中/已结算/赢/输/累计投入/累计返还/胜率）完整保留，
       只调布局不调数据。只在 predictions.html 生效（.pred-summary-bar/.pred-stat
       只有这个页面用，不影响 my-predictions.html 自己的 .mypred-stat-card） ---------- */
    body.page-predictions .pred-summary-bar {
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background-color: var(--border);
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
    }

    body.page-predictions .pred-stat {
        min-height: 0;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background-color: var(--surface);
        padding: 10px 4px;
    }

    body.page-predictions .pred-stat-value {
        font-size: 16px;
    }

    body.page-predictions .pred-stat-label {
        font-size: 11px;
        margin-top: 2px;
    }

    /* ---------- 手机版第二批：市场卡（选择市场，提交预测）从约 307px 压缩到
       180-210px。这张卡和首页 #marketsGrid 的卡片是完全不同的结构（没有缩略图/
       概率仪表，是分类+标题+价格徽标+订单簿说明+积分输入+Yes/No 提交按钮），
       只压间距/字号，不删字段、不改 predictionService 提交流程；.btn-yes/.btn-no
       是和 market-detail.html 共用的类名，这里全部加 #predMarketsGrid 限定，
       不影响 market-detail.html 的交易按钮 ---------- */
    body.page-predictions #predMarketsGrid .market-card.pred-market-card {
        padding: 10px 12px;
        gap: 6px;
    }

    body.page-predictions #predMarketsGrid .market-card-meta {
        margin-bottom: 0;
    }

    body.page-predictions #predMarketsGrid .market-title {
        font-size: 0.875rem;
        line-height: 1.35;
        margin-bottom: 0;
        min-height: 0;
    }

    body.page-predictions #predMarketsGrid .pred-price-row {
        margin-bottom: 0;
    }

    body.page-predictions #predMarketsGrid .pred-orderbook-line {
        margin-bottom: 0;
        min-height: 0;
        font-size: 0.7rem;
    }

    body.page-predictions #predMarketsGrid .pred-submit-row {
        gap: 6px;
    }

    body.page-predictions #predMarketsGrid .pred-points-input {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    body.page-predictions #predMarketsGrid .pred-yn-buttons .btn-yes,
    body.page-predictions #predMarketsGrid .pred-yn-buttons .btn-no,
    body.page-predictions #predMarketsGrid .pred-submit-row > a.btn-yes {
        padding: 9px 12px;
        font-size: 0.85rem;
    }
}

/* ====================================================================
   热门市场列表：极窄屏（≤360px）下交易量/流动性由"左右两列"切换成"上下两行"
   ====================================================================
   实测（390 用 $9999.99M 这类极端合成数值压力测试）：375px 及以上，两列布局
   宽度始终够用；只有 320/360px 这两档会出现"标签+数值"整体放不下两列的情况。
   这里不拆散"交易量"和它自己的数值（两者仍然同一行），而是让 stat1/stat2
   两个指标各自独占一整行的宽度、上下堆叠——用户要求的"两列放不下就上下排列"，
   而不是在指标内部把标签和数字拆成两行。只重新定义这一个页面这一个组件的
   grid-template-areas，不影响 768px 断点下已经生效的其它规则、不影响首页/
   详情页/我的预测/预测市场任何一处 */
@media (max-width: 360px) {
    body.page-hot-markets .hot-modal-row {
        grid-template-areas:
            "thumb category category side"
            "thumb title    title    side"
            "gap   stat1    stat1    arrow"
            "gap   stat2    stat2    arrow";
    }

    body.page-hot-markets .hot-modal-row-stat {
        justify-content: flex-start;
    }
}

/* ====================================================================
   手机版首页专属：好友推荐 + 通知中心（仅 index.html：body.page-home + ≤768px 生效）
   ====================================================================
   桌面端和其它页面永远 display:none，不占位、不影响任何现有布局。
   两个 bottom sheet 复用市场详情页已经验证过的同一套"贴底抽屉"视觉语言
   （position:fixed + bottom:0 + 顶部圆角 + 独立 backdrop），不是本页新发明的样式。
   ==================================================================== */
.header-quick-actions,
.mobile-referral-backdrop,
.mobile-referral-sheet,
.mobile-notif-backdrop,
.mobile-notif-sheet {
    display: none;
}

@media (max-width: 768px) {
    body.page-home .mobile-referral-backdrop.is-open,
    body.page-profile .mobile-referral-backdrop.is-open,
    body.page-home .mobile-notif-backdrop.is-open,
    body.page-profile .mobile-notif-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--modal-overlay-bg);
        z-index: 2000;
    }

    body.page-home .mobile-referral-sheet.is-open,
    body.page-profile .mobile-referral-sheet.is-open,
    body.page-home .mobile-notif-sheet.is-open,
    body.page-profile .mobile-notif-sheet.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        background-color: #fff;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
        z-index: 2001;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.page-home .mobile-sheet-header,
    body.page-profile .mobile-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--divider, #eef1f5);
        flex: none;
    }

    body.page-home .mobile-sheet-title,
    body.page-profile .mobile-sheet-title {
        font-size: 1rem;
        font-weight: 700;
        color: #111827;
    }

    body.page-home .mobile-sheet-close,
    body.page-profile .mobile-sheet-close {
        border: none;
        background: transparent;
        font-size: 1.3rem;
        line-height: 1;
        color: #9ca3af;
        cursor: pointer;
        padding: 0.3rem 0.45rem;
        border-radius: 0.4rem;
    }

    body.page-home .mobile-sheet-body,
    body.page-profile .mobile-sheet-body {
        padding: 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.page-home .mobile-sheet-subtitle,
    body.page-profile .mobile-sheet-subtitle {
        font-size: 0.85rem;
        color: var(--text-secondary, #6b7280);
        margin: 0 0 1rem;
        line-height: 1.5;
    }

    /* ---------- 好友推荐页面内容 ---------- */
    body.page-home .referral-section,
    body.page-profile .referral-section {
        margin-bottom: 1.1rem;
    }

    body.page-home .referral-section-title,
    body.page-profile .referral-section-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: #111827;
        margin: 0 0 0.4rem;
    }

    body.page-home .referral-section-desc,
    body.page-profile .referral-section-desc {
        font-size: 0.82rem;
        color: var(--text-secondary, #6b7280);
        line-height: 1.6;
        margin: 0;
    }

    body.page-home .referral-tiers,
    body.page-profile .referral-tiers {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.1rem;
    }

    body.page-home .referral-tier-card,
    body.page-profile .referral-tier-card {
        background-color: #f8fafc;
        border: 1px solid var(--border, #e5eaf2);
        border-radius: 0.75rem;
        padding: 0.75rem 0.9rem;
    }

    body.page-home .referral-tier-head,
    body.page-profile .referral-tier-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.3rem;
    }

    body.page-home .referral-tier-name,
    body.page-profile .referral-tier-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: #374151;
    }

    body.page-home .referral-tier-rate,
    body.page-profile .referral-tier-rate {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--brand, #2563eb);
    }

    body.page-home .referral-tier-desc,
    body.page-profile .referral-tier-desc {
        font-size: 0.78rem;
        color: var(--text-secondary, #6b7280);
        line-height: 1.5;
        margin: 0;
    }

    body.page-home .referral-example,
    body.page-profile .referral-example {
        margin-top: 0.6rem;
        background-color: #f8fafc;
        border-radius: 0.6rem;
        padding: 0.6rem 0.75rem;
    }

    body.page-home .referral-example-row,
    body.page-profile .referral-example-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.78rem;
        color: #374151;
        padding: 0.25rem 0;
    }

    body.page-home .referral-example-row strong,
    body.page-profile .referral-example-row strong {
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
    }

    body.page-home .referral-steps,
    body.page-profile .referral-steps,
    body.page-home .referral-rules,
    body.page-profile .referral-rules {
        margin: 0;
        padding-left: 1.1rem;
        font-size: 0.8rem;
        color: var(--text-secondary, #6b7280);
        line-height: 1.7;
    }

    body.page-home .referral-stats-grid,
    body.page-profile .referral-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        margin-bottom: 0.5rem;
    }

    body.page-home .referral-stat-item,
    body.page-profile .referral-stat-item {
        background-color: #f8fafc;
        border-radius: 0.6rem;
        padding: 0.6rem 0.7rem;
    }

    body.page-home .referral-stat-label,
    body.page-profile .referral-stat-label {
        display: block;
        font-size: 0.72rem;
        color: var(--text-secondary, #6b7280);
        margin-bottom: 0.2rem;
    }

    body.page-home .referral-stat-value,
    body.page-profile .referral-stat-value {
        font-size: 1rem;
        font-weight: 800;
        color: #111827;
    }

    body.page-home .referral-empty-hint,
    body.page-profile .referral-empty-hint {
        font-size: 0.78rem;
        color: #9ca3af;
        margin: 0.2rem 0 0;
        text-align: center;
    }

    body.page-home .referral-link-box,
    body.page-profile .referral-link-box {
        background-color: #f8fafc;
        border: 1px dashed var(--border, #e5eaf2);
        border-radius: 0.6rem;
        padding: 0.7rem 0.85rem;
        font-size: 0.82rem;
        color: var(--text-secondary, #6b7280);
        word-break: break-all;
    }

    body.page-home .referral-link-actions,
    body.page-profile .referral-link-actions {
        display: flex;
        gap: 0.6rem;
        margin-top: 0.6rem;
    }

    /* [hidden] 属性默认靠浏览器 UA 样式 display:none，但优先级低于上面这条作者样式的
       display:flex，会被盖掉——推荐码还没准备好时必须显式盖回 display:none，
       否则复制/分享按钮会在没有真实链接的情况下也显示出来 */
    body.page-home .referral-link-actions[hidden],
    body.page-profile .referral-link-actions[hidden] {
        display: none;
    }

    body.page-home .referral-link-btn,
    body.page-profile .referral-link-btn {
        flex: 1;
        padding: 0.6rem;
        border-radius: 0.6rem;
        border: 1px solid var(--border, #e5eaf2);
        background-color: #fff;
        color: #374151;
        font-weight: 600;
        font-size: 0.82rem;
        cursor: pointer;
    }

    body.page-home .referral-link-btn-primary,
    body.page-profile .referral-link-btn-primary {
        background-color: var(--brand, #2563eb);
        border-color: var(--brand, #2563eb);
        color: #fff;
    }

    /* ---------- 通知中心内容 ---------- */
    body.page-home .mobile-notif-tabs,
    body.page-profile .mobile-notif-tabs {
        display: flex;
        gap: 0.4rem;
        padding: 0.7rem 1rem 0;
        flex: none;
    }

    body.page-home .mobile-notif-tab,
    body.page-profile .mobile-notif-tab {
        border: none;
        background-color: #f3f4f6;
        color: #6b7280;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        cursor: pointer;
    }

    body.page-home .mobile-notif-tab.active,
    body.page-profile .mobile-notif-tab.active {
        background-color: #eff6ff;
        color: var(--brand, #2563eb);
    }

    body.page-home .mobile-notif-toolbar,
    body.page-profile .mobile-notif-toolbar {
        display: flex;
        justify-content: flex-end;
        padding: 0.5rem 1rem 0;
        flex: none;
    }

    body.page-home .mobile-notif-mark-all-btn,
    body.page-profile .mobile-notif-mark-all-btn {
        border: none;
        background: transparent;
        color: var(--brand, #2563eb);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0.2rem 0.3rem;
    }

    body.page-home .mobile-notif-list,
    body.page-profile .mobile-notif-list {
        flex: 1;
        min-height: 0;
    }

    body.page-home .mobile-notif-empty,
    body.page-profile .mobile-notif-empty {
        text-align: center;
        color: #9ca3af;
        font-size: 0.85rem;
        padding: 2.5rem 1rem;
    }

    body.page-home .mobile-notif-item,
    body.page-profile .mobile-notif-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--divider, #eef1f5);
    }

    body.page-home .mobile-notif-item:last-child,
    body.page-profile .mobile-notif-item:last-child {
        border-bottom: none;
    }

    body.page-home .mobile-notif-item-top,
    body.page-profile .mobile-notif-item-top {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-home .mobile-notif-tag,
    body.page-profile .mobile-notif-tag {
        font-size: 0.68rem;
        font-weight: 700;
        padding: 0.1rem 0.45rem;
        border-radius: 999px;
        flex: none;
    }

    body.page-home .mobile-notif-tag-announcement,
    body.page-profile .mobile-notif-tag-announcement {
        background-color: #eff6ff;
        color: var(--brand, #2563eb);
    }

    body.page-home .mobile-notif-tag-news,
    body.page-profile .mobile-notif-tag-news {
        background-color: #fef3c7;
        color: #b45309;
    }

    body.page-home .mobile-notif-item-title,
    body.page-profile .mobile-notif-item-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #111827;
        flex: 1;
        min-width: 0;
    }

    body.page-home .mobile-notif-unread-dot,
    body.page-profile .mobile-notif-unread-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background-color: #DC2626;
        flex: none;
    }

    body.page-home .mobile-notif-item-summary,
    body.page-profile .mobile-notif-item-summary {
        font-size: 0.78rem;
        color: var(--text-secondary, #6b7280);
        line-height: 1.5;
    }

    body.page-home .mobile-notif-item-time,
    body.page-profile .mobile-notif-item-time {
        font-size: 0.72rem;
        color: #9ca3af;
    }
}

/* ====================================================================
   第一阶段新增：手机版底部导航「我」— 账户中心页面（profile.html 专属）
   ====================================================================
   只在 body.page-profile 生效，不影响任何其它页面。这个页面本身没有"已有的
   桌面版布局"需要保护（是全新页面），所以样式采用移动优先、单栏卡片结构，
   在更宽的视口下用 max-width 居中，不强行拼一套桌面专属布局。
   颜色/圆角/阴影全部取自已有的全局变量（--brand/--profit/--border/
   --shadow-card/--mobile-card-radius 等），不新增第二套配色体系。
   ==================================================================== */
/* 2026-09 UI 精修：以 v0 最终设计源码（Tailwind）的数值为第一依据，逐项换算成 px：
   页面 bg-[#f4f5f7]、px-4=16px、pt-3=12px、space-y-3=12px；主卡片 rounded-2xl=16px、
   border-neutral-200/80=rgba(229,229,229,.8)、无阴影；主蓝 #3b5bff；neutral-400=#a3a3a3、
   500=#737373、700=#404040、800=#262626、900=#171717、300=#d4d4d4、100=#f5f5f5；
   emerald-600=#059669、amber-500=#f59e0b、violet-600=#7c3aed。
   Tailwind preflight 的 line-height:1.5 也一并沿用（.profile-page 上设置，未指定 leading 的文字继承它）。
   只调整视觉，DOM 里的 id/事件/数据绑定全部沿用，见 profile.html / profilePage.js。
   所有规则限定在 body.page-profile / .profile-* 内，不影响其它页面。 */
body.page-profile {
    --pf-blue: #3b5bff;
    --pf-card-border: rgba(229, 229, 229, 0.8);
    --pf-line: #f5f5f5;
    --pf-n900: #171717;
    --pf-n800: #262626;
    --pf-n700: #404040;
    --pf-n500: #737373;
    --pf-n400: #a3a3a3;
    --pf-n300: #d4d4d4;
    --pf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    background-color: #f4f5f7;
    min-height: 100vh;
}

.profile-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 12px 16px;
    padding-bottom: calc(var(--mobile-bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 1.5;
    color: var(--pf-n900);
}

/* 底部导航：本页「我」选中色使用 v0 主蓝（只改颜色，点击/跳转/显示逻辑不变） */
body.page-profile .mobile-nav-item.is-active {
    color: var(--pf-blue);
}

/* ---------- 顶部账户 / 资产卡（p-4） ---------- */
.profile-asset-card {
    background-color: #fff;
    border: 1px solid var(--pf-card-border);
    border-radius: 16px;
    padding: 16px;
}

.profile-asset-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.profile-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--pf-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.67;
}

.profile-identity-text {
    min-width: 0;
}

.profile-identity-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-n900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-identity-sub {
    font-size: 11px;
    color: var(--pf-n400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-brand {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--pf-blue);
}

.profile-total-assets {
    margin-top: 16px;
}

.profile-total-assets-label {
    display: block;
    font-size: 11px;
    color: var(--pf-n400);
}

.profile-total-assets-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--pf-n900);
    overflow-wrap: anywhere;
}

.profile-total-assets-unit {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pf-n500);
}

.profile-asset-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--pf-line);
}

.profile-asset-item {
    flex: 1 1 0;
    min-width: 0;
}

.profile-asset-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-asset-item-label {
    font-size: 11px;
    color: var(--pf-n400);
    white-space: nowrap;
}

.profile-asset-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--pf-n900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#profilePositionValue {
    color: #059669;
}

.profile-asset-divider {
    flex: none;
    width: 1px;
    height: 32px;
    background-color: var(--pf-line);
}

.profile-recharge-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background-color: var(--pf-blue);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.profile-recharge-btn-plus {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    font-size: 0;
}

.profile-recharge-btn-plus::before,
.profile-recharge-btn-plus::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.profile-recharge-btn-plus::before {
    width: 9.33px;
    height: 1.33px;
}

.profile-recharge-btn-plus::after {
    width: 1.33px;
    height: 9.33px;
}

/* ---------- 通用白色卡片（我的预测：p-4） ---------- */
.profile-section {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--pf-card-border);
    border-radius: 16px;
    padding: 16px;
}

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

.profile-section-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-n900);
}

.profile-section-link {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--pf-n400);
    text-decoration: none;
}

/* 「全部记录 ›」的箭头：原 DOM 是文字符号，这里用同尺寸(14px)的线性 chevron 遮罩替代（v0: h-3.5 w-3.5） */
.profile-section-link > span {
    display: inline-block;
    width: 14px;
    height: 14px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: var(--pf-chevron) center / contain no-repeat;
    mask: var(--pf-chevron) center / contain no-repeat;
}

/* ---------- 我的预测：一张卡四等分（grid-cols-4 + divide-x） ---------- */
.profile-pred-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px;
}

.profile-pred-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    min-width: 0;
    text-decoration: none;
}

.profile-pred-card + .profile-pred-card {
    border-left: 1px solid var(--pf-line);
}

.profile-pred-icon {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-pred-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.67;
}

.profile-pred-card-open .profile-pred-icon {
    color: #059669;
}

.profile-pred-card-pending .profile-pred-icon {
    color: #f59e0b;
}

.profile-pred-card-settled .profile-pred-icon {
    color: #7c3aed;
}

.profile-pred-card-history .profile-pred-icon {
    color: var(--pf-n400);
}

.profile-pred-value,
.profile-pred-arrow {
    order: 2;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--pf-n900);
}

.profile-pred-label {
    order: 3;
    font-size: 11px;
    color: var(--pf-n400);
    white-space: nowrap;
}

/* ====================================================================
   2026-09 手机版「我」页面改版：只在 @media (max-width:768px) 里生效，
   >768px（含桌面 1440×900）继续保持这次改版之前的样子，一个像素都不变。
   .profile-mobile-only 上面这条默认规则必须写在所有用到它的桌面基础规则
   （.profile-recharge-btn 等）后面，靠 CSS 源码顺序（同优先级同权重）确保
   非手机宽度下默认隐藏；下面 @media 里再统一打开。
   ==================================================================== */
/* .profile-mobile-only 单独作为类选择器时优先级太低，会被 .profile-pred-grid（display:grid）
   等元素自己的基础规则按源码顺序压过去——这里改成"类型类 + .profile-mobile-only"的组合
   选择器（优先级 0,0,2,0），确保不管源码顺序如何，手机专属元素默认都能正确隐藏，
   下面 @media 里也能正确恢复各自本该有的 display 值（grid/block/inline-flex 各不相同） */
.profile-asset-row-break.profile-mobile-only,
.profile-recharge-btn.profile-mobile-only,
.profile-vip-row.profile-mobile-only,
.profile-pred-grid.profile-mobile-only {
    display: none;
}

/* 新增的"盈亏/福利/任务"卡片用 <button> 实现（点击打开面板，不是链接跳转），
   这里去掉浏览器原生按钮外观，让它在视觉上和其它 <a class="profile-pred-card"> 完全一致 */
button.profile-pred-card {
    background: none;
    border: none;
    font: inherit;
    width: 100%;
    cursor: pointer;
}

.profile-pred-card-pnl .profile-pred-icon {
    color: var(--pf-blue);
}

.profile-pred-card-rewards .profile-pred-icon {
    color: #f59e0b;
}

.profile-pred-card-tasks .profile-pred-icon {
    color: #7c3aed;
}

/* ---------- 提现按钮：白底 + ASFO 蓝边框，和充值的蓝色实心按钮区分主/次级 ---------- */
.profile-withdraw-btn {
    background-color: #fff;
    color: var(--pf-blue);
    border: 1px solid var(--pf-blue);
}

/* ---------- VIP 等级区域（手机版专属，见上面 .profile-mobile-only） ---------- */
.profile-vip-row {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pf-line);
}

.profile-vip-levels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-n700);
    margin-bottom: 8px;
}

.profile-vip-level-next {
    color: var(--pf-n400);
    font-weight: 500;
}

.profile-vip-progress-track {
    height: 4px;
    border-radius: 999px;
    background-color: var(--pf-line);
    overflow: hidden;
}

.profile-vip-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background-color: var(--pf-blue);
}

/* ---------- 盈亏面板内容行（结构复用 .profile-ledger-item 的排版思路） ---------- */
.profile-pnl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--divider, #eef1f5);
}

.profile-pnl-row:last-child {
    border-bottom: none;
}

.profile-pnl-row-label {
    font-size: 0.85rem;
    color: var(--text-primary, #111827);
}

.profile-pnl-row-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* 一、彻底删除"总资产"这一块的空间，不是隐藏文字留空白 */
    .profile-total-assets {
        display: none;
    }

    /* 二、删除总资产后，可用余额/持仓资金整体上移——总资产原来的 margin-top:16px
       是留给它和上面身份区的间距，现在直接由这一行来承担，数值不变，字体/颜色不变 */
    .profile-asset-row {
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .profile-asset-item {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .profile-asset-divider {
        display: none;
    }

    /* 三、打开所有手机版专属新增元素：换行占位、提现按钮、VIP 区域、新版四宫格。
       每个元素恢复各自本来该有的 display 值，不是统一恢复成 block
       （.profile-pred-grid 需要 grid 才能保持四列布局，不能被这里的规则打成单列）。 */
    .profile-asset-row-break.profile-mobile-only {
        display: block;
        flex-basis: 100%;
        height: 0;
    }

    .profile-recharge-btn.profile-mobile-only {
        display: inline-flex;
    }

    .profile-vip-row.profile-mobile-only {
        display: block;
    }

    .profile-pred-grid.profile-mobile-only {
        display: grid;
    }

    .profile-asset-row .profile-recharge-btn {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        height: 40px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .profile-asset-row .profile-recharge-btn-plus {
        display: none;
    }

    /* 四、桌面版原来的"当前持仓/待成交/已结算/历史记录"四宫格在手机宽度下让位给
       新版"持仓/盈亏/福利/任务"，DOM 两份都在，CSS 二选一显示，不是同一份内容改文案 */
    #profilePredGridDesktop {
        display: none;
    }
}

/* ---------- 我的服务 / 更多功能：无可见标题（标题保留给读屏软件） ---------- */
.profile-section-services .profile-section-header,
.profile-section-more .profile-section-header {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 我的服务：一张卡 p-2，三等分 + divide-x */
.profile-section-services {
    padding: 8px;
}

.profile-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    border: none;
    background: none;
    min-width: 0;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
}

.profile-service-card + .profile-service-card {
    border-left: 1px solid var(--pf-line);
}

.profile-service-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-blue);
}

.profile-service-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.58;
}

.profile-service-dot {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc2626;
    border: 1.5px solid #fff;
}

.profile-service-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--pf-n700);
    white-space: nowrap;
}

.profile-service-sub,
.profile-service-arrow {
    display: none;
}

/* 更多功能：纯设置列表，卡片 px-4 */
.profile-section-more {
    padding: 0 16px;
}

.profile-more-list {
    display: flex;
    flex-direction: column;
}

.profile-more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid var(--pf-line);
    background: none;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.profile-more-row:last-child {
    border-bottom: none;
}

.profile-more-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--pf-n400);
}

.profile-more-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.58;
}

.profile-more-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--pf-n800);
}

.profile-more-arrow {
    flex: none;
    width: 16px;
    height: 16px;
    font-size: 0;
    background-color: var(--pf-n300);
    -webkit-mask: var(--pf-chevron) center / contain no-repeat;
    mask: var(--pf-chevron) center / contain no-repeat;
}

/* ---------- 原有唯一的主按钮 #profileLogoutBtn：游客 = 注册 / 登录（主蓝），已注册 = 退出登录（危险色） ---------- */
.profile-logout-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background-color: #fef2f2;
    color: #dc2626;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.profile-logout-btn.is-guest-cta {
    background-color: var(--pf-blue);
    color: #fff;
}

/* ---------- 新增的三个 sheet（我的收藏/资产明细/帮助与规则）共用外观，
   复用全站已经验证过的贴底抽屉视觉语言（圆角/关闭按钮/遮罩），和
   .mobile-referral-sheet 同一套设计语言，只是换了一批新 class 名，
   避免和 body.page-home 下已有的 .mobile-referral-sheet 规则互相牵连 ---------- */
.profile-sheet-backdrop,
.profile-sheet {
    display: none;
}

.profile-sheet-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg, rgba(15, 23, 42, 0.30));
    z-index: 2000;
}

.profile-sheet.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    background-color: #fff;
    border-radius: var(--mobile-sheet-radius, 1rem) var(--mobile-sheet-radius, 1rem) 0 0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
    z-index: 2001;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.page-profile .mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--divider, #eef1f5);
    flex: none;
}

body.page-profile .mobile-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

body.page-profile .mobile-sheet-close {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    border-radius: 0.4rem;
}

body.page-profile .mobile-sheet-body {
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-sheet-loading {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-muted, #94A3B8);
    font-size: 0.85rem;
}

.profile-sheet-empty {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-muted, #94A3B8);
    font-size: 0.85rem;
}

/* 我的收藏列表项 */
.profile-fav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--divider, #eef1f5);
    text-decoration: none;
}

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

.profile-fav-item-thumb {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 0.4rem;
    object-fit: cover;
    background-color: var(--surface-muted, #F8FAFC);
}

.profile-fav-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 资产明细流水项 */
.profile-ledger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--divider, #eef1f5);
}

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

.profile-ledger-item-main {
    min-width: 0;
}

.profile-ledger-item-reason {
    font-size: 0.85rem;
    color: var(--text-primary, #111827);
    font-weight: 600;
}

.profile-ledger-item-time {
    font-size: 0.72rem;
    color: var(--text-muted, #94A3B8);
    margin-top: 0.15rem;
}

.profile-ledger-item-amount {
    flex: none;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.profile-ledger-item-amount.is-positive {
    color: var(--profit, #16A34A);
}

.profile-ledger-item-amount.is-negative {
    color: var(--loss, #DC2626);
}

/* 帮助与规则内容 */
.profile-help-sheet .mobile-sheet-body {
    padding-top: 0.5rem;
}

.profile-help-section {
    margin-bottom: 1.1rem;
}

.profile-help-section:last-child {
    margin-bottom: 0;
}

.profile-help-section h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0 0 0.35rem;
}

.profile-help-section p {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748B);
    line-height: 1.6;
    margin: 0;
}

/* ---------- 退出登录确认：小型居中对话框，不是贴底抽屉 ---------- */
.profile-logout-confirm {
    display: none;
}

.profile-logout-confirm.is-open {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2.5rem);
    max-width: 340px;
    background-color: #fff;
    border-radius: var(--mobile-card-radius, 0.75rem);
    box-shadow: var(--modal-shadow, 0 18px 50px rgba(15, 23, 42, 0.18));
    padding: 1.25rem 1.1rem 1.1rem;
    z-index: 2101;
}

.profile-logout-confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin-bottom: 0.5rem;
}

.profile-logout-confirm-body {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748B);
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.profile-logout-confirm-actions {
    display: flex;
    gap: 0.6rem;
}

.profile-logout-confirm-cancel,
.profile-logout-confirm-confirm {
    flex: 1 1 0;
    height: 40px;
    border-radius: 0.55rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.profile-logout-confirm-cancel {
    border: 1px solid var(--border, #E5EAF2);
    background-color: #fff;
    color: var(--text-secondary, #64748B);
}

.profile-logout-confirm-confirm {
    border: none;
    background-color: #DC2626;
    color: #fff;
}

/* profileLogoutConfirmBackdrop 复用通用 .profile-sheet-backdrop.is-open 样式，
   这里只补它比 sheet 更高的 z-index（对话框本身 z-index:2101 高于普通 sheet 内容） */
#profileLogoutConfirmBackdrop.is-open {
    z-index: 2100;
}

/* 手机版详情页底部导航高度较窄时（很小的手机），四个入口的字号/图标沿用全局
   .mobile-nav-item 既有规则，这里不重复声明，本页只借用这套已经验证过的组件 */
@media (max-width: 360px) {
    .profile-asset-row {
        gap: 8px;
    }

    .profile-recharge-btn {
        padding: 8px 10px;
    }
}

/* ====================================================================
   正式账户系统 Phase 1：注册 / 登录页面（public/account.html 专属）
   ====================================================================
   独立新页面，没有需要保护的旧版本，样式复用全站已有的品牌色/卡片圆角/阴影/
   .custom-input 输入框，不新增第二套视觉体系。移动优先、更宽视口下卡片居中，
   和 profile.html 同一个处理方式。
   ==================================================================== */
body.page-account {
    background-color: var(--page-bg, #F5F7FB);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-page {
    width: 100%;
    max-width: 400px;
    padding: var(--mobile-page-padding, 1rem);
}

.account-card {
    background-color: var(--surface, #fff);
    border: 1px solid var(--border, #E5EAF2);
    border-radius: var(--mobile-card-radius, 0.75rem);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(15, 23, 42, 0.05));
    padding: 1.5rem 1.25rem;
}

.account-brand {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--brand, #2563EB);
    margin-bottom: 1.25rem;
}

.account-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--divider, #EEF1F5);
}

.account-tab {
    flex: 1;
    padding: 0.6rem 0;
    border: none;
    background: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-muted, #94A3B8);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.account-tab.active {
    color: var(--brand, #2563EB);
    border-bottom-color: var(--brand, #2563EB);
}

.account-hint {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748B);
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

.account-field {
    margin-bottom: 0.9rem;
}

.account-field label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748B);
    margin-bottom: 0.35rem;
}

.account-error {
    font-size: 0.8rem;
    color: var(--loss, #DC2626);
    margin: 0 0 0.8rem;
}

.account-submit-btn {
    width: 100%;
    height: var(--mobile-control-height, 44px);
    border: none;
    border-radius: 0.6rem;
    background-color: var(--brand, #2563EB);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.account-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.account-back-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted, #94A3B8);
    text-decoration: none;
}

/* ====================================================================
   手机版第二批：注册/登录页（account.html）
   ====================================================================
   只在 ≤768px 生效，不改 --mobile-page-padding/--mobile-card-radius/
   --mobile-control-height 这几个全局 token 本身（help.html/my-predictions.html
   等页面也在用，改 token 会连带影响它们，这里全部用 body.page-account 前缀
   单独覆盖），桌面端和其它页面样式不变。 ==================================================================== */
@media (max-width: 768px) {
    /* 卡片改成不居中撑满：原来 body.page-account 用 flex 居中 + .account-page
       max-width:400px，宽度刚好落在 400-768px 之间时（比如 430px）会同时产生
       "容器外居中留白 + 容器内 16px padding"两层空白叠加，导致左右边距远超 16px；
       同时 flex 垂直居中在内容较短时会把卡片顶到屏幕中间，顶部空白经常有 190px+。
       手机版改成从顶部固定留白的普通块级布局，卡片顶部位置不再随注册/登录表单
       字段数量变化而跳动 */
    body.page-account {
        display: block;
        padding-top: 48px;
    }

    body.page-account .account-page {
        max-width: none;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    body.page-account .account-card {
        padding: 16px;
        border-radius: 16px;
        border-color: var(--asfo-mobile-border, rgba(229, 229, 229, .8));
        box-shadow: none;
    }

    body.page-account .account-field {
        margin-bottom: 12px;
    }

    body.page-account .custom-input {
        height: 44px;
        padding: 0 12px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    body.page-account .account-submit-btn {
        height: 48px;
        border-radius: 12px;
        font-size: 15px;
        background-color: var(--asfo-mobile-blue, #3b5bff);
    }

    /* 错误提示：字段级提示紧跟在字段下方（DOM 顺序本来就是"字段 -> account-error"，
       这里只调字号/行高），服务端整体错误沿用现有"提交按钮上方"的位置不变；
       用 [hidden] 属性选择器强制 display:block+visibility:hidden 预留位置，
       不需要改 accountPage.js 的 showError/hideError 判断逻辑——是否显示错误、
       显示什么文案完全不变，只是隐藏态从"不占位"改成"占位但不可见"，减少
       注册/登录出错前后的卡片高度跳动 */
    body.page-account .account-error {
        font-size: 12px;
        line-height: 18px;
        min-height: 18px;
        margin: 0 0 8px;
    }

    body.page-account .account-error[hidden] {
        display: block;
        visibility: hidden;
    }
}

/* ====================================================================
   帮助与规则（help.html 专属，纯前端静态帮助中心）
   ====================================================================
   全部规则限定在 body.page-help / .help-* 作用域内，不影响任何现有页面。
   颜色/圆角/阴影全部取自已有的全局变量（--brand/--border/--divider/--shadow-card/
   --mobile-card-radius 等），和「我」页面同一套视觉：浅灰页面背景、白色圆角卡片、
   细分割线、灰色右箭头。移动优先，宽屏下用 max-width 居中，不拼桌面专属布局。
   ==================================================================== */
body.page-help {
    background-color: var(--page-bg, #F5F7FB);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

.help-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #E5EAF2);
    padding-top: env(safe-area-inset-top, 0px);
}

.help-topbar-inner {
    max-width: 640px;
    margin: 0 auto;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0 0.5rem;
}

.help-back-btn {
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.help-back-btn:active {
    background-color: var(--surface-muted, #F8FAFC);
}

.help-back-btn svg {
    width: 22px;
    height: 22px;
}

.help-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--mobile-page-padding, 1rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--mobile-section-gap, 1.25rem);
}

.help-card {
    background-color: var(--surface, #fff);
    border: 1px solid var(--border, #E5EAF2);
    border-radius: var(--mobile-card-radius, 0.75rem);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(15, 23, 42, 0.05));
    padding: 0.2rem 1rem;
}

/* ---------- 分类 / 二级列表：整行可点击 ---------- */
.help-list {
    display: flex;
    flex-direction: column;
}

.help-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.8rem 0.1rem;
    border-bottom: 1px solid var(--divider, #EEF1F5);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.help-row:last-child {
    border-bottom: none;
}

.help-row:active {
    background-color: var(--surface-muted, #F8FAFC);
}

.help-row-category {
    padding: 0.95rem 0.1rem;
}

.help-cat-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-muted, #F8FAFC);
    color: var(--text-secondary, #64748B);
}

.help-cat-icon svg {
    width: 20px;
    height: 20px;
}

.help-cat-icon-book {
    color: #2563EB;
}

.help-cat-icon-chart {
    color: #16A34A;
}

.help-cat-icon-wallet {
    color: #D97706;
}

.help-cat-icon-shield {
    color: #7C3AED;
}

.help-cat-icon-help {
    color: #64748B;
}

.help-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.help-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-row-sub {
    font-size: 0.78rem;
    color: var(--text-muted, #94A3B8);
    overflow-wrap: anywhere;
}

.help-row-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-row-arrow {
    flex: none;
    font-size: 1.1rem;
    color: var(--text-muted, #94A3B8);
}

/* ---------- 详情正文：以阅读体验为主 ---------- */
.help-article {
    padding: 1.25rem 1.1rem 1.3rem;
}

.help-article-title {
    margin: 0 0 0.9rem;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-p {
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.8;
    color: #334155;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.help-h {
    margin: 1.25rem 0 0.55rem;
    padding-left: 0.6rem;
    border-left: 3px solid var(--brand, #2563EB);
    font-size: 0.98rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-ul,
.help-ol {
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.help-ul li,
.help-ol li {
    position: relative;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #334155;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.help-ul li {
    padding-left: 1.1rem;
}

.help-ul li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--text-muted, #94A3B8);
}

.help-ol {
    counter-reset: help-step;
}

.help-ol li {
    padding-left: 1.9rem;
    counter-increment: help-step;
}

.help-ol li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background-color: var(--brand-soft, #EFF6FF);
    color: var(--brand, #2563EB);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-kv strong {
    color: var(--text-primary, #111827);
    font-weight: 700;
}

.help-example {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
    background-color: var(--brand-soft, #EFF6FF);
}

.help-example p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    font-weight: 600;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-path {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 0.9rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border, #E5EAF2);
    border-radius: 0.5rem;
    background-color: var(--surface-muted, #F8FAFC);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-article > :last-child {
    margin-bottom: 0;
}

/* ---------- 常见问题：手风琴 ---------- */
.help-faq-item {
    border-bottom: 1px solid var(--divider, #EEF1F5);
}

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

.help-faq-q {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0.1rem;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.help-faq-q-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary, #111827);
    overflow-wrap: anywhere;
}

.help-faq-chevron {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--text-muted, #94A3B8);
    transition: transform 0.2s ease;
}

.help-faq-chevron svg {
    display: block;
    width: 20px;
    height: 20px;
}

.help-faq-item.is-open .help-faq-chevron {
    transform: rotate(180deg);
}

.help-faq-a {
    padding: 0 0.1rem 0.4rem;
}

.help-faq-a .help-p {
    margin-bottom: 0.7rem;
}

/* ---------- contact.html 专属：诚实说明 + 帮助中心入口按钮 ----------
   .help-card 默认 padding 是给列表行准备的（0.2rem 1rem，很窄），这里放的是
   段落 + 按钮，改成普通卡片的 16px 内边距；.account-submit-btn 是 <button> 专用的
   通用按钮样式（高度/圆角/品牌蓝背景都复用它），这里只加 .contact-help-btn
   补上 <a> 标签需要的文字居中和去下划线，不改 .account-submit-btn 本身 */
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 16px;
}

.contact-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 0.25rem;
}

/* ====================================================================
   法律 / 平台信息入口布局（本段全部为新增类名，不修改任何已有规则）
   ====================================================================
   1) 注册页：注册按钮下方"注册即表示您已阅读并同意《服务条款》和《隐私政策》"
   2) Footer：原来平铺 7 个链接的「平台信息」列，改成 法律 / 市场与风险 / 平台 三个分组，
      并用 tier1 / tier2 / tier3 表达视觉优先级：
        tier1 服务条款、隐私政策（最高，加粗 + 深色）
        tier2 市场规则、风险披露、免责声明（次要，沿用 Footer 默认链接样式）
        tier3 关于我们、Cookie 政策（普通信息，略小）
   3) 手机端：三个分组收成三行紧凑的横向链接（竖线分隔），不再是一长列竖排 */

/* ---------- 注册页法律说明 ---------- */
.account-legal-note {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-secondary, #64748B);
    text-align: center;
}

/* 《服务条款》和《隐私政策》整体不换行：窄屏只会在"注册即表示您已阅读并同意"后面整体折到下一行，
   两个链接始终保持横向并排 */
.account-legal-links {
    white-space: nowrap;
}

.account-legal-note a {
    color: var(--brand, #2563EB);
    text-decoration: none;
    /* 扩大点击区域，同时用负 margin 抵消，不改变文字排版 */
    display: inline-block;
    padding: 0.3rem 0.15rem;
    margin: -0.3rem -0.15rem;
}

.account-legal-note a:hover {
    color: var(--brand-hover, #1D4ED8);
    text-decoration: underline;
}

/* ---------- Footer 法律 / 平台信息分组（桌面） ---------- */
.site-footer-legal {
    flex: 2;
}

.site-footer-legal-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.site-footer-link-tier1 {
    font-weight: 600;
    color: var(--text-number);
}

.site-footer-link-tier1:hover {
    color: var(--brand);
}

.site-footer-link-tier3 {
    font-size: 0.8rem;
}

/* ---------- Footer 法律 / 平台信息分组（手机） ---------- */
@media (max-width: 768px) {
    .site-footer-legal-groups {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* 分组标题在手机端视觉隐藏（读屏软件仍可读到），避免 Footer 变高 */
    .site-footer-legal-heading {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .site-footer-legal-group .site-footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    .site-footer-legal-group .site-footer-links li {
        display: flex;
        align-items: center;
    }

    /* 竖线分隔：用伪元素画，不进入 DOM 文字，也不可点击 */
    .site-footer-legal-group .site-footer-links li + li::before {
        content: '';
        width: 1px;
        height: 0.8rem;
        background-color: #CBD5E1;
    }

    /* 每个链接上下各留约 0.6rem 内边距，单行点击高度约 40px；首个链接左侧不留白，和上方文字左对齐 */
    .site-footer-legal-group .site-footer-link {
        padding: 0.6rem 0.75rem;
    }

    .site-footer-legal-group .site-footer-links li:first-child .site-footer-link {
        padding-left: 0;
    }

    .site-footer-link-tier3 {
        font-size: 0.85rem;
    }
}

/* ==================== 市场详情页图表统计栏：窄屏渐进隐藏品牌 ====================
   单独放在文件末尾（不嵌套在前面的 @media(max-width:768px) 内部——纯 CSS 不支持
   @media 嵌套，必须是独立的顶层规则）。三个统计数据任何时候都完整保留（配合上面
   改成的 overflow-x:auto，即使在断点之间的中间宽度也不会真正丢失数据，只是可能
   需要在这一行内小幅滑动），这两级断点只负责按要求依次收起品牌全称、再收起整个
   品牌区块，让品牌主动为数据让路，而不是反过来。
   实测：成交量+结束时间+流动性三项在收紧到可读下限字号后自然宽度约 318px，常见
   手机宽度（390/375/360px）下容器可用宽度在 300~330px 区间，加上完整品牌（约 90px）
   普遍需要滑动较多才能看到品牌名称，480px 以下先收起"AssetSaFeo"文字只留精简
   "ASFO"；320px 这类更窄的测试基准下三项数据本身已经需要小幅滑动，340px 以下
   把品牌整体收起，避免进一步增加滑动距离 */
@media (max-width: 480px) {
    body.page-market-detail .chart-summary-brand-name {
        display: none;
    }
}

@media (max-width: 340px) {
    body.page-market-detail .chart-summary-brand {
        display: none;
    }
}

/* ==================== 手机版（≤768px）分类页"全部市场"工具栏：筛选 / 收藏按钮中性灰状态 ====================
   只改悬停/选中/键盘焦点的颜色，尺寸/布局/功能不变；电脑版（≥769px）不受影响。
   首页（.is-home-search）在 640px 断点里已有同色系规则，这里与之保持一致 */
@media (max-width: 768px) {
    .category-toolbar-icon-btn:hover {
        background-color: #E5E7EB;
        border-color: #D1D5DB;
        color: #1F2937;
    }

    .category-toolbar-icon-btn.is-active {
        background-color: #E5E7EB;
        border-color: #9CA3AF;
        color: #111827;
    }

    .category-toolbar-icon-btn:focus-visible {
        outline: 2px solid #9CA3AF;
        outline-offset: 2px;
        box-shadow: none;
        border-color: #9CA3AF;
    }
}