/* ============================================================================
 * xt-shell.css · xt-app-shell + xt-side-panel 全局样式
 * ---------------------------------------------------------------------------
 * 由 postbuild.js 注入 index.html。
 * 说明：这些组件被 4 个 tabbar 页面（home/steady/ipo/mine）分别引用，uni-app
 *   scoped 会在打包时产生多套 data-v hash，导致 CSS 选择器与实际 DOM 不匹配。
 *   将样式提取到全局 CSS 后彻底规避 scoped 冲突。所有 class 均以 .xt-shell-
 *   或 .xt-sp- 前缀命名，天然全局唯一，不会污染。
 * ==========================================================================*/

/* ============ xt-app-shell ============ */
.xt-shell { min-height: 100vh; background: var(--color-bg-base, #F7F7F7); }

/* PC 顶部横栏 */
.xt-shell.is-pc { display: flex; flex-direction: column; }
.xt-shell-topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(29, 44, 78, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #FFFFFF;
    box-shadow: 0 2px 12px rgba(6, 31, 23, 0.24),
                0 0 0 1px rgba(143, 151, 170, 0.24) inset;
}
.xt-shell-topbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex; align-items: center; gap: 32px;
    padding: 12px 24px;
}
.xt-shell-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.xt-shell-brand-cn {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600; font-size: 15px;
    letter-spacing: 0.10em;
    color: #FFFFFF;
}
.xt-shell-brand-en {
    display: block;
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 9px;
    letter-spacing: 0.24em;
    color: rgba(217, 123, 127, 0.85);
    margin-top: 1px;
}
.xt-shell-tabs { flex: 1; display: flex; gap: 6px; }
.xt-shell-tab {
    padding: 8px 18px;
    font-size: 13px;
    color: rgba(245, 237, 224, 0.65);
    cursor: pointer;
    border-radius: 999px;
    letter-spacing: 0.06em;
    transition: all 160ms ease-out;
    font-family: var(--font-sans);
}
.xt-shell-tab:hover { color: rgba(245, 237, 224, 0.95); }
.xt-shell-tab.active {
    background: rgba(143, 151, 170, 0.16);
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(143, 151, 170, 0.36) inset;
}
.xt-shell-topbar-right { display: flex; align-items: center; gap: 12px; }
.xt-shell-user {
    padding: 6px 14px;
    background: rgba(245, 237, 224, 0.08);
    border-radius: 999px;
    border: 1px solid rgba(143, 151, 170, 0.28);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.xt-shell-user-name { font-size: 12px; color: #FFFFFF; }
.xt-shell-user-balance {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: rgba(217, 123, 127, 0.9);
}
.xt-shell-user.login { padding: 8px 18px; }
.xt-shell-user.login text {
    font-size: 12px;
    color: rgba(217, 123, 127, 1);
    letter-spacing: 0.06em;
}

/* PC 三栏 */
.xt-shell-body {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 24px;
    padding: 24px;
    align-items: flex-start;
}
.xt-shell.bp-wide .xt-shell-body {
    max-width: 1720px;
    grid-template-columns: 240px 1fr 320px;
}

/* 左侧菜单 */
.xt-shell-side-left {
    position: sticky; top: 76px;
    display: flex; flex-direction: column;
    padding: 20px 16px;
    background: var(--color-bg-surface, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(29, 44, 78, 0.06),
                0 0 0 1px rgba(143, 151, 170, 0.16) inset;
    min-height: calc(100vh - 100px);
}
.xt-shell-menu { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.xt-shell-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--color-text-secondary, #4E5058);
    border-radius: 8px;
    cursor: pointer;
    transition: all 160ms ease-out;
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
}
.xt-shell-menu-item:hover {
    background: rgba(143, 151, 170, 0.08);
    color: var(--color-text-primary, #1D2C4E);
}
.xt-shell-menu-item.active {
    background: linear-gradient(180deg, #1D2C4E, #14213B);
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(143, 151, 170, 0.36) inset;
}
.xt-shell-menu-icon {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0;
    font-family: 'IBM Plex Mono', monospace;
    opacity: 0.85;
}
.xt-shell-menu-badge {
    margin-left: auto;
    background: rgba(214, 73, 63, 0.9);
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
}
.xt-shell-menu-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed rgba(143, 151, 170, 0.28);
    display: flex; flex-direction: column; gap: 4px;
}
.xt-shell-menu-copy {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.06em;
}
.xt-shell-menu-eyebrow {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 9px;
    letter-spacing: 0.24em;
    color: rgba(143, 151, 170, 0.85);
}

/* 中间内容 */
.xt-shell-main {
    min-width: 0;
    background: var(--color-bg-surface, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(29, 44, 78, 0.06),
                0 0 0 1px rgba(143, 151, 170, 0.16) inset;
    overflow: hidden;
}

/* 右侧栏 */
.xt-shell-side-right {
    position: sticky; top: 76px;
    display: flex; flex-direction: column;
    min-height: calc(100vh - 100px);
}

/* 平板 · 中间居中，隐藏右侧栏 */
.xt-shell.bp-tablet .xt-shell-body {
    grid-template-columns: 200px 1fr;
    max-width: 1024px;
}
.xt-shell.bp-tablet .xt-shell-side-right { display: none; }

/* ============ xt-side-panel ============ */
.xt-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
}
.xt-sp-card {
    background: var(--color-bg-surface, #FFFFFF);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(29, 44, 78, 0.06),
                0 0 0 1px rgba(143, 151, 170, 0.16) inset;
}
.xt-sp-title {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px dashed rgba(143, 151, 170, 0.28);
}
.xt-sp-title-en {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: rgba(143, 151, 170, 0.85);
}
.xt-sp-title-cn {
    font-family: var(--font-sans);
    font-weight: 600; font-size: 14px;
    color: var(--color-text-primary, #1D2C4E);
    letter-spacing: 0.06em;
}

/* Index */
.xt-sp-idx-list { display: flex; flex-direction: column; gap: 10px; }
.xt-sp-idx-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0;
}
.xt-sp-idx-cn {
    display: block; font-size: 13px;
    color: var(--color-text-primary, #1D2C4E); font-weight: 500;
}
.xt-sp-idx-code {
    display: block; font-size: 10px;
    color: rgba(0, 0, 0, 0.4); margin-top: 2px;
    font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em;
}
.xt-sp-idx-price { text-align: right; }
.xt-sp-idx-val {
    display: block; font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 600;
}
.xt-sp-idx-chg {
    display: block; font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; margin-top: 2px;
}
.xt-sp-idx-val.up, .xt-sp-idx-chg.up { color: #D6493F; }
.xt-sp-idx-val.down, .xt-sp-idx-chg.down { color: #5A9587; }
.xt-sp-tip {
    display: block; margin-top: 10px;
    font-size: 10px; color: rgba(0, 0, 0, 0.35);
    letter-spacing: 0.04em;
}

/* IPO */
.xt-sp-ipo-list { display: flex; flex-direction: column; gap: 10px; }
.xt-sp-ipo-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; margin: -8px -10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 160ms ease-out;
}
.xt-sp-ipo-row:hover { background: rgba(143, 151, 170, 0.06); }
.xt-sp-ipo-name {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--color-text-primary, #1D2C4E);
}
.xt-sp-ipo-code {
    display: block; font-size: 10px;
    color: rgba(0, 0, 0, 0.4); margin-top: 2px;
    font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em;
}
.xt-sp-ipo-price {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.xt-sp-ipo-p {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; color: rgba(0, 0, 0, 0.7);
}
.xt-sp-ipo-btn {
    background: linear-gradient(180deg, #1D2C4E, #14213B);
    color: #FFFFFF;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 0.06em;
    box-shadow: 0 0 0 1px rgba(143, 151, 170, 0.4) inset;
}

/* Kefu */
.xt-sp-kefu { padding: 0; overflow: hidden; }
.xt-sp-kefu-inner {
    position: relative;
    padding: 24px 20px;
    color: #FFFFFF;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 88% 15%, rgba(143, 151, 170, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #14213B 0%, #14213B 100%);
}
.xt-sp-kefu-compass {
    position: absolute; right: -20px; bottom: -20px;
    width: 96px; height: 96px; opacity: 0.15; pointer-events: none;
}
.xt-sp-kefu-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0.28em;
    color: rgba(217, 123, 127, 0.85);
    margin-bottom: 6px;
}
.xt-sp-kefu-title {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600; font-size: 18px;
    color: #FFFFFF; letter-spacing: 0.08em;
}
.xt-sp-kefu-desc {
    display: block; margin-top: 6px;
    font-size: 11px; color: rgba(245, 237, 224, 0.62);
    letter-spacing: 0.04em;
}
.xt-sp-kefu-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 14px;
    padding: 6px 14px;
    background: rgba(245, 237, 224, 0.14);
    border: 1px solid rgba(143, 151, 170, 0.4);
    border-radius: 999px;
    font-size: 11px;
    color: rgba(217, 123, 127, 1);
    cursor: pointer;
    transition: all 160ms ease-out;
}
.xt-sp-kefu-btn:hover { background: rgba(245, 237, 224, 0.22); }
.xt-sp-kefu-btn .arrow { font-size: 13px; }

/* ============================================================================
 * TA v4-visual · 二级页 PC 端居中限宽 · 卡片化
 * ---------------------------------------------------------------------------
 * 适用范围:所有走 xt-nav-bar + 单栏布局的操作/表单/记录页(mine/*)
 * 生效条件:视口 >= 900px
 * 目标:让手机优先的窄栏页在 PC 端居中于 ≤ 720px 卡片,免于左右大片空白
 * 命名:所有页面 root class 以 .xt- 开头,双字母页面简称如 .xt-rc / .xt-wd / .xt-bb
 * ==========================================================================*/
@media (min-width: 1024px) and (min-width: 99999px) {
    html[data-bp="desktop"] body,
    html[data-bp="wide"] body,
    html[data-bp="tablet"] body {
        background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--xt-divider-warm) 100%);
    }

    /* 通用 PC 二级页容器 */
    .xt-rc, .xt-wd, .xt-bb, .xt-cm, .xt-mm, .xt-set, .xt-da,
    .xt-fd, .xt-position, .xt-wl, .xt-mc, .xt-md, .xt-sc,
    .xt-pd, .xt-invitation, .xt-team, .xt-tier {
        max-width: 720px !important;
        margin: 24px auto 48px !important;
        min-height: auto !important;
        background: #FFFFFF !important;
        border-radius: 12px !important;
        box-shadow:
            0 4px 24px rgba(29, 44, 78, 0.06),
            0 1px 4px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(29, 44, 78, 0.10) !important;
        overflow: hidden;
        padding-bottom: 32px !important;
    }
    /* wide 屏放宽到 800 */
    html[data-bp="wide"] .xt-rc,
    html[data-bp="wide"] .xt-wd,
    html[data-bp="wide"] .xt-bb,
    html[data-bp="wide"] .xt-cm,
    html[data-bp="wide"] .xt-mm,
    html[data-bp="wide"] .xt-set,
    html[data-bp="wide"] .xt-da,
    html[data-bp="wide"] .xt-fd,
    html[data-bp="wide"] .xt-position,
    html[data-bp="wide"] .xt-wl,
    html[data-bp="wide"] .xt-mc,
    html[data-bp="wide"] .xt-md,
    html[data-bp="wide"] .xt-sc,
    html[data-bp="wide"] .xt-pd,
    html[data-bp="wide"] .xt-invitation,
    html[data-bp="wide"] .xt-team,
    html[data-bp="wide"] .xt-tier {
        max-width: 840px !important;
    }

    /* PC 端 · 隐藏所有二级页顶部 xt-nav-bar 的 status bar 占位 */
    .xt-rc uni-status-bar,
    .xt-wd uni-status-bar,
    .xt-bb uni-status-bar,
    .xt-cm uni-status-bar,
    .xt-mm uni-status-bar,
    .xt-set uni-status-bar,
    .xt-da uni-status-bar,
    .xt-fd uni-status-bar,
    .xt-position uni-status-bar,
    .xt-wl uni-status-bar,
    .xt-mc uni-status-bar { display: none !important; }

    /* 卡片式外观 · 内部 hero 区域自适应圆角 */
    .xt-rc-hero, .xt-wd-hero, .xt-bb-hero, .xt-cm-hero, .xt-da-hero,
    .xt-fd-hero, .xt-position-hero, .xt-wl-hero, .xt-mc-hero, .xt-mm-hero {
        border-radius: 0 !important;
    }
    /* 页面内 xt-card 弱化外阴影(已在白卡内) */
    .xt-rc .xt-card, .xt-wd .xt-card, .xt-bb .xt-card,
    .xt-cm .xt-card, .xt-mm .xt-card, .xt-set .xt-card,
    .xt-da .xt-card, .xt-fd .xt-card, .xt-position .xt-card,
    .xt-wl .xt-card, .xt-mc .xt-card {
        box-shadow: none !important;
        border: 1px solid #EAE3D6 !important;
        margin: 16px 24px !important;
    }

    /* PC 端 · 按钮 hover 效果统一 */
    .xt-rc .xt-btn, .xt-wd .xt-btn, .xt-bb .xt-btn, .xt-cm .xt-btn,
    .xt-mm .xt-btn, .xt-set .xt-btn, .xt-da .xt-btn {
        cursor: pointer !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .xt-rc .xt-btn:hover:not(.is-disabled),
    .xt-wd .xt-btn:hover:not(.is-disabled),
    .xt-bb .xt-btn:hover:not(.is-disabled),
    .xt-cm .xt-btn:hover:not(.is-disabled),
    .xt-mm .xt-btn:hover:not(.is-disabled),
    .xt-set .xt-btn:hover:not(.is-disabled),
    .xt-da .xt-btn:hover:not(.is-disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(29, 44, 78, 0.20) !important;
    }

    /* xt-nav-bar 顶部返回按钮 · 卡片圆角上顶部 */
    .xt-rc > uni-view:first-child,
    .xt-wd > uni-view:first-child,
    .xt-bb > uni-view:first-child,
    .xt-cm > uni-view:first-child,
    .xt-mm > uni-view:first-child,
    .xt-set > uni-view:first-child,
    .xt-da > uni-view:first-child,
    .xt-fd > uni-view:first-child,
    .xt-position > uni-view:first-child,
    .xt-wl > uni-view:first-child,
    .xt-mc > uni-view:first-child {
        border-radius: 12px 12px 0 0;
    }

    /* 记录页(fundDetails/buyDetails/withdraw_record/message_center) · 列表分割线弱化 */
    .xt-fd-item, .xt-position-item, .xt-wl-item, .xt-mc-item {
        border-bottom: 1px solid rgba(234, 227, 214, 0.6) !important;
    }
    .xt-fd-item:hover, .xt-position-item:hover, .xt-wl-item:hover, .xt-mc-item:hover {
        background: rgba(247, 243, 236, 0.5) !important;
        cursor: pointer;
    }
}

/* 平板过渡 */
@media (min-width: 768px) and (max-width: 899px) and (min-width: 99999px) {
    .xt-rc, .xt-wd, .xt-bb, .xt-cm, .xt-mm, .xt-set, .xt-da,
    .xt-fd, .xt-position, .xt-wl, .xt-mc {
        max-width: 600px !important;
        margin: 16px auto !important;
    }
}