/*
 * bybit.css —— PC 前台（app/index）按 Bybit 官网现状重排的样式层
 *
 * 加载顺序：layui.css → style.css → dark.css（仅 Dark 主题）→ font-awesome → 本文件
 * 必须排在最后：与 style.css/dark.css 同权重（类名个数相同）的选择器靠「后来者胜」生效。
 * 本文件只靠「CSS 变量 + 新类名 + 精准覆盖」生效，不改 style.css/dark.css，
 * 因此未重排的交易页（deal/member/finance…）只是跟着换色，布局不受影响。
 *
 * 取色来自 bybit.com 实测（2026-11 桌面版）：
 *   顶栏/暗区 #17181E、品牌橙 #FF9C2E、页面底 #F5F7FA、卡片 #FFFFFF、灰底卡 #F0F0F0、
 *   正文 #1D1D1F、次要文字 #71757A、涨 #20B26C、跌 #F63649、
 *   hairline rgba(213,218,224,.5)、卡片圆角 16px、行圆角 8px、主按钮圆角 24px、
 *   胶囊按钮圆角 100px；无描边、无投影，层次全靠底色差。
 */

:root {
    --bb-page: #f5f7fa;
    --bb-card: #ffffff;
    --bb-card-2: #f0f0f0;
    --bb-nav: #17181e;
    --bb-nav-ink: #ffffff;
    --bb-foot: #17181e;
    --bb-ink: #1d1d1f;
    --bb-ink-strong: #000000;
    --bb-muted: #71757a;
    --bb-line: rgba(213, 218, 224, .5);
    --bb-brand: #ff9c2e;
    --bb-brand-hi: #ffb45c;
    --bb-brand-ink: #17181e;
    --bb-up: #20b26c;
    --bb-down: #f63649;
    --bb-radius: 16px;
    --bb-radius-row: 8px;
    --bb-wrap: 1200px;
    /* hero 白带与浅灰面板：单独两个变量，Dark 下与页面底/卡片拉开三级色差 */
    --bb-hero: #ffffff;
    --bb-panel: #f5f7fa;
    /* 分段器选中项、悬浮元素等「比卡片再抬一级」的底 */
    --bb-raise: #ffffff;
    /* 行/下拉项悬浮底：浅色是「凹进去的灰」，深色下改用 --bb-hover 换成「抬起来的亮灰」 */
    --bb-hover: #f5f7fa;
}

/* Dark 主题只换变量值，组件规则一份通用（layout 里按 $theme 给 body 加 .bb-dark）
 * 层级按 Bybit 的做法「越往里越亮」单调递增：
 *   page #0b0e12（页面底）< hero #12161c（首屏带）< panel #151920（外槽）
 *   < card #1b2027（卡/表/下拉）< card-2 #232a32（卡内凹陷与 hover）< raise #2b333c（分段器选中）
 * 导航与页脚仍用品牌墨 #17181e，不跟卡片混色。 */
body.bb-dark {
    --bb-page: #0b0e12;
    --bb-card: #1b2027;
    --bb-card-2: #232a32;
    --bb-nav: #17181e;
    --bb-foot: #0b0e12;
    --bb-ink: #eaecef;
    --bb-ink-strong: #ffffff;
    --bb-muted: #8a8f98;
    --bb-line: rgba(255, 255, 255, .08);
    --bb-brand-ink: #17181e;
    --bb-hero: #12161c;
    --bb-panel: #151920;
    --bb-raise: #2b333c;
    --bb-hover: #232a32;
}

body {
    background: var(--bb-page);
    color: var(--bb-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:hover { color: var(--bb-brand); }

/* 涨/跌色全站统一（原 .color-green/.color-red 由 style.css 定义，这里覆盖为 Bybit 取值） */
.color-green { color: var(--bb-up) !important; }
.color-red { color: var(--bb-down) !important; }
.color-blue { color: var(--bb-brand) !important; }

/* 首页/行情页 d3 迷你走势：index.js 用 presentation 属性写死 lightseagreen/indianred，
   CSS 的 stroke 优先级高于属性，故可在这里换成 Bybit 涨跌色，不必改带 12h 缓存的静态 js。 */
.svg path[stroke="lightseagreen"] { stroke: var(--bb-up); }
.svg path[stroke="indianred"] { stroke: var(--bb-down); }
.svg path { stroke-width: 1.6; }
/* 页脚脚本补的「—」占位符：曲线一旦画出（path 带上 d 属性）就自动隐藏 */
.svg path[d] ~ .mk-ph { display: none; }

/* ---------------- 通用容器 / 区块节奏 / 按钮 ---------------- */
.bb-wrap { max-width: var(--bb-wrap); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.bb-sec { padding: 56px 0 8px; box-sizing: border-box; }
.bb-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.bb-h { font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; color: var(--bb-ink-strong); margin: 0; }
.bb-sub { margin-top: 12px; font-size: 20px; line-height: 1.5; color: var(--bb-muted); }
.bb-more { font-size: 15px; font-weight: 600; color: var(--bb-brand); white-space: nowrap; }
.bb-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px;
    border-radius: 24px; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; border: 0; }
.bb-btn.primary { background: var(--bb-brand); color: var(--bb-brand-ink); }
.bb-btn.primary:hover { background: var(--bb-brand-hi); color: var(--bb-brand-ink); }
.bb-btn.ghost { background: transparent; color: var(--bb-brand); border: 1px solid var(--bb-brand); }
.bb-btn.ghost:hover { background: var(--bb-brand); color: var(--bb-brand-ink); }
.bb-btn.pill { border-radius: 100px; height: 40px; padding: 0 20px; font-size: 14px; }

/* ---------------- 顶部导航（对齐 block_head 的真实类名） ----------------
 * .header 沿用 style.css 的 60px 高度：deal/member 等页依赖这个高度定位，只换配色与形态。 */
.header {
    background: var(--bb-nav);
    height: 60px;
    line-height: 60px;
    /* style.css 写的是 padding:0 0 20px（content-box），深色带因此高 80px；这里收成一个整块 */
    padding: 0;
    box-sizing: border-box;
    position: relative;
}
/* 导航内容对齐 1200px 正文列：logo 左边缘与 hero 文案左边缘同一根线。
   桌面宽度改成 flex 排布：menu-left 自适应占满、menu-right 按内容收拢，
   比 layui 的 xs8/xs3 百分比浮动列更稳（收窄到 1200 后不会把菜单挤到第二行）。
   1024px 以下交给 style.css 原有的响应式（它会把 menu-right 铺满一行），这里不动。 */
@media (min-width: 1025px) {
    .header .layui-nav {
        display: flex;
        align-items: center;
        max-width: var(--bb-wrap);
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
    }
    .header .layui-nav .menu-left,
    .header .layui-nav .menu-right { position: static; float: none; width: auto !important; white-space: nowrap; }
    .header .layui-nav .menu-left { flex: 1 1 auto; min-width: 0; }
    .header .layui-nav .menu-right { flex: 0 0 auto; }
}
/* 特异性说明：dark.css 用 .layui-nav .menu-left .layui-nav-item a（3 类 1 元素）给导航上色，
   style.css 用 .menu-right .layui-nav-item .layui-nav-child a:hover 给下拉项上色。
   下面所有导航规则都写成 .header .layui-nav .menu-left/.menu-right …，比它们多一层类，
   暗色主题下（dark.css 先加载）也能稳定胜出。 */
.header .layui-nav { background: transparent; }
.header .layui-nav .menu-left .layui-nav-item,
.header .layui-nav .menu-right .layui-nav-item { color: var(--bb-nav-ink); font-size: 14px; font-weight: 500; }
.header .layui-nav .menu-left .layui-nav-item > a,
.header .layui-nav .menu-right .layui-nav-item > a { color: var(--bb-nav-ink); font-size: 14px; background: transparent; }
.header .layui-nav .menu-left .layui-nav-item > a:hover,
.header .layui-nav .menu-right .layui-nav-item > a:hover,
.header .layui-nav .menu-left .layui-nav-item:hover > a,
.header .layui-nav .menu-left .layui-this > a { color: var(--bb-brand); background: transparent; }
.header .layui-nav-bar,
.header .layui-nav .layui-this:after { background-color: var(--bb-brand) !important; border-bottom-color: var(--bb-brand) !important; height: 2px; }
.header .layui-nav .layui-nav-more { border-top-color: #71757a; }
.header .layui-nav .layui-nav-mored,
.header .layui-nav-itemed > a .layui-nav-more { border-color: transparent transparent var(--bb-brand); }
.header .logo { color: var(--bb-nav-ink); }

/* 右侧整体：字号收小，垂直居中对齐 Bybit 顶栏 */
.header .layui-nav .menu-right .layui-nav-item > a { font-size: 14px; }
.header .menu-right .layui-nav-item .layui-btn { font-size: 14px; font-weight: 600; margin-right: 8px; }

/* 登录＝白字胶囊（无边底），注册＝橙底深字胶囊 —— Bybit 顶栏同款。
   style.css 的 .layui-btn-normal{background-color:#3d74eb !important} 权重低但带 !important，
   注册胶囊沿用了这个类，因此这里同样必须用 !important 才能拿到 Bybit 橙。 */
.header .layui-nav .bb-cta { line-height: 1; }
.header .menu-right .bb-cta .layui-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 16px;
    line-height: 1; border-radius: 100px; background: transparent; border: 0; box-shadow: none; margin-right: 8px; }
.header .menu-right .bb-cta-login .layui-btn { color: #fff !important; background-color: transparent !important; }
.header .menu-right .bb-cta-login .layui-btn:hover { color: var(--bb-brand) !important; background-color: transparent !important; }
.header .menu-right .bb-cta-reg .layui-btn { color: var(--bb-brand-ink) !important; background-color: var(--bb-brand) !important; }
.header .menu-right .bb-cta-reg .layui-btn:hover { background-color: var(--bb-brand-hi) !important; color: var(--bb-brand-ink) !important; }

/* 已登录：铃铛 + 用户名 */
.header .layui-nav .menu-right .msg-bell-li > a,
.header .layui-nav .menu-right .user-li > a { color: #fff; background: transparent; }
.header .layui-nav .menu-right .msg-bell-li > a:hover,
.header .layui-nav .menu-right .user-li > a:hover { color: var(--bb-brand); background: transparent; }

/* 主题拨动开关：在深色导航里换成 Bybit 描边 + 橙色滑块 */
.header .layui-nav .menu-right .sw-li { line-height: normal; }
.header .sw-li .testswitch { float: none; display: inline-block; vertical-align: middle; margin: 0 8px; }
.header .sw-li .testswitch-label { border-color: rgba(255, 255, 255, .28); }
.header .sw-li .testswitch-switch { background: var(--bb-brand); }

/* 语言下拉里的小国旗垂直居中 */
.header .layui-nav .layui-nav-item img { vertical-align: middle; }

/* 下拉面板：深色导航下的亮卡（跟随主题变量） */
.header .layui-nav .menu-left .layui-nav-child,
.header .layui-nav .menu-right .layui-nav-child { background: var(--bb-card) !important; border: 1px solid var(--bb-line);
    border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(8, 12, 20, .18); }
.header .layui-nav .menu-left .layui-nav-child a,
.header .layui-nav .menu-right .layui-nav-child a { color: var(--bb-ink); background: transparent; height: 36px;
    line-height: 36px; border-radius: 8px; font-size: 14px; text-align: left; }
.header .layui-nav .menu-left .layui-nav-child a:hover,
.header .layui-nav .menu-right .layui-nav-child a:hover { background: var(--bb-hover); color: var(--bb-brand); }
.header .layui-nav .menu-left .layui-nav-child dd a.layui-this,
.header .layui-nav .menu-right .layui-nav-child dd a.layui-this { background: var(--bb-hover) !important; color: var(--bb-brand) !important; }

/* ---------------- 首页 hero：左文案 + 右真实行情卡（Bybit 首页结构） ---------------- */
.bb-hero { background: var(--bb-hero); padding: 44px 0 56px; }
.bb-hero-in { display: flex; align-items: center; gap: 56px; }
.bb-hero-l { flex: 1 1 516px; min-width: 0; }
.bb-hero-l h1 { margin: 0; font-size: 48px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; color: var(--bb-ink-strong); }
.bb-hero-sub { margin: 20px 0 0; font-size: 20px; line-height: 1.45; color: var(--bb-ink); }
.bb-hero-cta { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bb-hero-note { margin-top: 16px; font-size: 13px; color: var(--bb-muted); }
.bb-hero-r { flex: 0 0 600px; }

/* hero 右侧外卡：浅灰面板 + 内嵌白卡，纯底色分层（Bybit 不给投影）；Dark 下 page→hero→panel→card 四级 */
.bb-panel { background: var(--bb-panel); border-radius: var(--bb-radius); padding: 16px; }
.bb-panel-card { background: var(--bb-card); border-radius: var(--bb-radius); padding: 16px; }
.bb-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 14px; }
.bb-tabs { display: flex; align-items: center; gap: 22px; font-size: 18px; font-weight: 600; color: var(--bb-ink-strong); }

/* 行情行：44px 高、行圆角 8px、hairline 分隔，左名称右涨跌 */
.bb-row { display: flex; align-items: center; height: 44px; padding: 0 8px; border-radius: var(--bb-radius-row);
    border-bottom: 1px solid var(--bb-line); cursor: pointer; }
.bb-row:last-child { border-bottom: 0; }
.bb-row:hover { background: var(--bb-hover); }
.bb-row .nm { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-row .nm i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--bb-muted); overflow: hidden; text-overflow: ellipsis; }
.bb-row .pc { flex: 0 0 auto; width: 104px; text-align: right; font-size: 14px; color: var(--bb-ink); font-variant-numeric: tabular-nums; }
.bb-row .ch { flex: 0 0 auto; width: 84px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-row .sp { flex: 0 0 auto; width: 120px; display: flex; justify-content: center; color: var(--bb-muted); }
.bb-row .sp svg { display: block; }
/* 币种图标：logo 缺失时回落首字母渐变徽标（同行情页方案）
   必须显式 inline-block：span 默认 inline，width/height 不生效，
   放进 layui-table 的 td（非 flex 容器）时盒子会塌成 0，绝对定位的首字母 em 就会压到后面的名称上。
   在 flex 容器里 inline-block 会被 blockify，.bb-row 的表现不变 */
.bb-ico { position: relative; display: inline-block; vertical-align: middle; flex: 0 0 24px; width: 24px; height: 24px;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--bb-brand), #ff7a45); }
.bb-ico em { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center;
    justify-content: center; font-style: normal; font-size: 10px; font-weight: 700; color: var(--bb-brand-ink); line-height: 1; }
.bb-ico img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; object-fit: contain; }

/* ---------------- 首页行情表卡片（保留 layui-table 结构，只换皮） ---------------- */
.bb-table-card { background: var(--bb-card); border-radius: var(--bb-radius); padding: 6px 16px 16px; box-sizing: border-box; }
.bb-table-card .layui-table { background: transparent; margin: 0; }
.bb-table-card .layui-table tr { height: 56px; border-bottom: 1px solid var(--bb-line); background: transparent !important; }
.bb-table-card .layui-table thead tr { height: 44px; background: transparent !important; }
.bb-table-card .layui-table th, .bb-table-card .layui-table td { padding: 8px 12px; border: 0; font-size: 14px; color: var(--bb-ink); }
.bb-table-card .layui-table thead th { color: var(--bb-muted); font-size: 13px; font-weight: 500; }
.bb-table-card .layui-table tr span { margin-left: 0; }
/* 名称列：图标与文字之间给固定间距，不依赖 HTML 里的空白符 */
.bb-table-card .layui-table td .bb-ico { margin-right: 8px; }
.bb-table-card .layui-table tbody tr:hover td,
.bb-table-card .layui-table tbody tr:hover { background: var(--bb-hover); }
.bb-table-card .layui-btn-sm { height: 32px; line-height: 32px; padding: 0 16px; font-size: 13px; border-radius: 100px; }
.bb-table-card .layui-btn-primary { background: transparent; color: var(--bb-brand); border: 1px solid var(--bb-brand); }
.bb-table-card .layui-btn-primary:hover { background: var(--bb-brand); color: var(--bb-brand-ink); border-color: var(--bb-brand); }
/* 同认证页主按钮：style.css 的 .layui-btn-normal 带 !important，这里必须同样加 */
.bb-table-card .layui-btn-normal { background-color: var(--bb-brand) !important; color: var(--bb-brand-ink) !important; }
.bb-table-card .layui-btn-normal:hover { background-color: var(--bb-brand-hi) !important; color: var(--bb-brand-ink) !important; }
.bb-table-card .layui-border-blue { border-color: var(--bb-brand) !important; color: var(--bb-brand) !important; background: transparent; }
.bb-table-card .layui-border-blue:hover { background: var(--bb-brand); color: var(--bb-brand-ink) !important; }
.bb-table-card .more { text-align: center; font-size: 14px; margin-top: 20px; }
.bb-table-card .more a { color: var(--bb-brand); font-weight: 600; }

/* ---------------- 卡矩阵：产品 / 服务 ---------------- */
.bb-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.bb-grid > * { box-sizing: border-box; }
.bb-grid-2 > * { flex: 1 1 380px; }
.bb-muted { color: var(--bb-muted); }
.bb-tile { flex: 1 1 32%; min-width: 260px; background: var(--bb-card); border-radius: var(--bb-radius);
    padding: 24px; transition: transform .18s ease; }
.bb-tile:hover { transform: translateY(-3px); }
.bb-tile h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--bb-ink-strong); }
.bb-tile p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--bb-muted); }
.bb-tile .thumb { display: block; width: 100%; height: 150px; object-fit: contain; border-radius: 12px; background: var(--bb-page); }
body.bb-dark .bb-tile .thumb { background: var(--bb-card-2); }

/* ---------------- 公告 / 资讯 ---------------- */
.bb-list { background: var(--bb-card); border-radius: var(--bb-radius); padding: 8px 24px 24px; height: 100%; box-sizing: border-box; }
.bb-list-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 4px; }
.bb-list-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--bb-ink-strong); }
.bb-list-head h3 i { margin-right: 8px; color: var(--bb-brand); }
.bb-list ul { list-style: none; margin: 0; padding: 0; }
.bb-list li { min-height: 44px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--bb-line); }
.bb-list li:last-child { border-bottom: 0; }
.bb-list li a { flex: 1 1 auto; font-size: 14px; color: var(--bb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-list li time { flex: 0 0 auto; font-size: 13px; color: var(--bb-muted); font-variant-numeric: tabular-nums; }

/* ---------------- 资讯独立页（notice/news.html，L3） ----------------
 * 与首页/公告页的 .bb-list 单行列表不同：资讯条目自带正文摘要（NoticeContent::summary，80 字），
 * 所以一条占一块，标题一行、摘要两到三行、日期收尾；logo 有值才出缩略图（RSS 采集的条目多为空）。 */
.bb-news-bg { background: var(--bb-page); }
.bb-news { background: var(--bb-card); border-radius: var(--bb-radius); padding: 6px 24px 24px; box-sizing: border-box; }
.bb-news-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0 14px; border-bottom: 1px solid var(--bb-line); }
.bb-news-h { margin: 0; font-size: 22px; font-weight: 700; color: var(--bb-ink-strong); }
.bb-news-tabs { display: flex; gap: 8px; }
.bb-news-tabs a { padding: 6px 16px; border-radius: 100px; font-size: 14px; color: var(--bb-ink); background: var(--bb-panel); }
.bb-news-tabs a:hover { color: var(--bb-brand-ink); background: var(--bb-brand); text-decoration: none; }
.bb-news-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--bb-line); }
.bb-news-item:last-child { border-bottom: 0; }
.bb-news-item:hover .bb-news-it { color: var(--bb-brand); }
.bb-news-thumb { flex: 0 0 auto; width: 108px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--bb-panel); }
.bb-news-body { display: block; flex: 1 1 auto; min-width: 0; }
.bb-news-it { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--bb-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-news-sum { display: block; margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--bb-muted); }
.bb-news-time { display: block; margin-top: 10px; font-size: 13px; color: var(--bb-muted); font-variant-numeric: tabular-nums; }
.bb-news-arrow { flex: 0 0 auto; align-self: center; font-size: 18px; color: var(--bb-muted); opacity: .5; }

/* ---------------- App 下载带 ---------------- */
.bb-down { margin-top: 56px; background: var(--bb-card); border-radius: var(--bb-radius); padding: 40px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.bb-down h2 { margin: 0; font-size: 32px; font-weight: 800; color: var(--bb-ink-strong); }
.bb-down p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--bb-muted); }
.bb-down-qr { display: flex; gap: 24px; margin-left: auto; }
.bb-qr-card { background: var(--bb-page); border-radius: 12px; padding: 16px; text-align: center; font-size: 14px; color: var(--bb-ink); }
body.bb-dark .bb-qr-card { background: var(--bb-card-2); }
/* 二维码按后台地址实时生成，URL 变长后模块数会到 35，120px 只有 3.4px/模块，手机难扫；提到 140px
   padding 10px：phpqrcode 只画了 1 模块白边，Dark 下卡片底是深色，需要这圈白底补足扫描用的静区 */
.bb-qr-card img { display: block; width: 140px; height: 140px; margin: 0 auto 10px; background: #fff; border-radius: 8px; padding: 10px; }

/* ---------------- 页脚：深色分栏（沿用 block_bottom 的列结构，只换皮） ---------------- */
.footer { background: var(--bb-foot); color: #eaecef; padding: 56px 0 32px; }
.footer .footer-con { width: 100% !important; max-width: var(--bb-wrap); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.footer h5 { margin-bottom: 18px; font-size: 15px; font-weight: 600; color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { height: 30px; line-height: 30px; }
.footer ul li, .footer ul li a { color: #8a8f98; font-size: 14px; }
.footer ul li a:hover { color: var(--bb-brand); }
.footer .font-12 { font-size: 12px; color: #71757a; line-height: 1.8; }
.footer .color-grey { color: #71757a; }
.footer img { border-radius: 8px; }
.footer .footer-icon { padding-left: 0; }
/* 版权行与最后一栏底部对齐，公告文案用 hairline 单独分一行（Bybit 页脚节奏） */
.footer .footer-con > .layui-row { padding-bottom: 24px; }
.footer > .footer-con > .font-12:last-child,
.footer .footer-con > .font-12 { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }

/* ---------------- 登录 / 注册 / 找回密码：浅底 + 单张白卡（Bybit） ----------------
 * 结构沿用 .login-bg > .login-box > form.layui-form，只给 .login-box 追加 .bb-auth 类。 */
.login-bg { background: var(--bb-page); min-height: calc(100vh - 252px); padding: 56px 0 72px; box-sizing: border-box; }
.bb-auth { max-width: 480px; margin: 0 auto; background: var(--bb-card); border-radius: var(--bb-radius);
    padding: 36px 32px 28px; box-sizing: border-box; position: static; }
.bb-auth h2 { margin: 0 0 4px; font-size: 28px; font-weight: 700; color: var(--bb-ink-strong); }
.bb-auth .layui-form { width: auto; padding: 0; }
.bb-auth .layui-form-item { margin: 20px 0 0; }
.bb-auth h5 { font-size: 13px; font-weight: 400; color: var(--bb-muted); margin: 0 0 8px; }
.bb-auth .layui-input { height: 46px; line-height: 46px; border-radius: 10px; border: 1px solid var(--bb-line);
    background: var(--bb-card); color: var(--bb-ink); font-size: 15px; }
.bb-auth .layui-input:focus { border-color: var(--bb-brand); box-shadow: none; }
.bb-auth .layui-btn { height: 48px; line-height: 48px; border-radius: 24px; font-size: 16px; font-weight: 600; }
/* style.css 把 .layui-btn-normal 写成 background-color:#3d74eb !important，
   这里必须同样带 !important 才能把主按钮换成 Bybit 橙（只作用于认证页，不动 deal/member） */
.bb-auth .layui-btn-normal { background-color: var(--bb-brand) !important; color: var(--bb-brand-ink) !important; }
.bb-auth .layui-btn-normal:hover { background-color: var(--bb-brand-hi) !important; color: var(--bb-brand-ink) !important; }
.bb-auth .layui-btn-primary { background: transparent; border: 1px solid var(--bb-line); color: var(--bb-ink); }
.bb-auth .login-btn { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.bb-auth .login-btn .layui-btn { width: auto; padding: 0 34px; height: 46px; line-height: 46px; margin-right: 0; }
.bb-auth .login-phone { position: static; left: auto; top: auto; margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--bb-line); font-size: 14px; color: var(--bb-muted); }
.bb-auth .login-phone a { color: var(--bb-brand); font-weight: 600; }
.bb-auth .login-ex { position: static; left: auto; top: auto; margin-top: 14px; color: var(--bb-muted); font-size: 13px; line-height: 1.7; }
.bb-auth .login-ex p { margin: 0; }
/* 手机/邮箱切换：改造成 Bybit 的胶囊分段器（轨道内凹、选中项抬起） */
.bb-auth .wicket-btn-box, .bb-auth #wicket-btn-box { background: var(--bb-page); border-bottom: 0; border-radius: 100px;
    padding: 4px; height: auto; line-height: normal; text-align: left; }
.bb-auth .wicket-list { display: flex; gap: 4px; }
.bb-auth .wicket-btn { width: auto; flex: 1 1 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--bb-muted);
    padding: 9px 0; border-radius: 100px; cursor: pointer; }
.bb-auth .wicket-btn.btn-this { background: var(--bb-raise); border: 1px solid var(--bb-line); color: var(--bb-ink-strong); animation: none; }
/* 验证码按钮：贴在输入框右侧，去掉灰底，收成橙色文字链 + 与输入框同圆角 */
.bb-auth .v-send { background: transparent; color: var(--bb-brand); font-size: 14px;
    border-left: 1px solid var(--bb-line); border-radius: 0 10px 10px 0; }
.bb-auth .left-input-box.hidebox, .bb-auth .right-input-box.hidebox { display: none; }
.bb-auth .layui-form-label { color: var(--bb-muted); font-size: 14px; }
.bb-auth .layui-form-checked i, .bb-auth .layui-form-checked .layui-icon { background: var(--bb-brand) !important; border-color: var(--bb-brand) !important; color: var(--bb-brand-ink) !important; }

/* ---------------- 行情页（market/index.html 用 --mk-* 变量，这里统一换成 Bybit 取值） ---------------- */
.market { --mk-panel: var(--bb-card); --mk-head: var(--bb-page); --mk-line: var(--bb-line);
    --mk-hover: var(--bb-page); --mk-muted: var(--bb-muted); --mk-badge-a: var(--bb-brand); --mk-badge-b: #ff7a45; }
body.bb-dark .market, .market.mk-dark { --mk-panel: var(--bb-card); --mk-head: var(--bb-card-2);
    --mk-line: var(--bb-line); --mk-hover: var(--bb-card-2); --mk-muted: var(--bb-muted); }
.market .mk-wrap { max-width: var(--bb-wrap); }
.market .mk-title { font-size: 40px; font-weight: 800; letter-spacing: -.6px; color: var(--bb-ink-strong); }
.market .mk-chip { background: var(--bb-brand); color: var(--bb-brand-ink); }
.market .mk-card { background: var(--bb-card); border: 0; box-shadow: none; border-radius: var(--bb-radius); }
/* 页面内联样式给的是 12px 卡角 + 11px 内角；这里统一抬到 Bybit 的 16px 体系，
   内角留 4px 差值，让表头/末行的浅底色块与卡片圆角贴合（不能用 overflow:hidden，会废掉 sticky 表头） */
.market .mk-card .layui-table thead th:first-child { border-top-left-radius: calc(var(--bb-radius) - 4px); }
.market .mk-card .layui-table thead th:last-child { border-top-right-radius: calc(var(--bb-radius) - 4px); }
.market .mk-card .layui-table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--bb-radius) - 4px); }
.market .mk-card .layui-table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--bb-radius) - 4px); }
.market .mk-card .layui-table thead th { color: var(--mk-muted); }
.market .mk-sort.mk-asc:after, .market .mk-sort.mk-desc:after { color: var(--bb-brand); }
.market .mk-sym, .market .mk-price { color: var(--bb-ink); }
.market .mk-icon em { color: var(--bb-brand-ink); }
.market .mk-search input:focus { border-color: var(--bb-brand); box-shadow: none; }

/* ---------------- 列表分页条（block_pager，股票 50 支/页、行情 30 条/页） ---------------- */
.bb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.bb-pager .bb-pg { display: inline-block; min-width: 34px; height: 34px; line-height: 32px; padding: 0 9px; text-align: center; font-size: 14px; border: 1px solid var(--bb-line); border-radius: 8px; color: var(--bb-ink); background: var(--bb-card); transition: color .15s, border-color .15s; }
.bb-pager a.bb-pg:hover { color: var(--bb-brand); border-color: var(--bb-brand); text-decoration: none; }
.bb-pager .bb-pg.active { color: var(--bb-brand-ink); background: var(--bb-brand); border-color: var(--bb-brand); font-weight: 600; }
.bb-pager .bb-pg.dis { color: var(--bb-muted); border-color: transparent; background: transparent; opacity: .55; }
.bb-pager .bb-pg.gap { min-width: 16px; padding: 0; border-color: transparent; background: transparent; color: var(--bb-muted); }
.bb-pager .bb-pg-cur { margin-left: 6px; font-size: 13px; color: var(--bb-muted); font-variant-numeric: tabular-nums; }

/* ---------------- 窄屏：hero 单列、卡片纵向堆叠、认证卡满宽 ---------------- */
@media (max-width: 1100px) {
    .bb-hero-in { flex-direction: column; align-items: flex-start; gap: 32px; }
    .bb-hero-r { flex: 1 1 auto; width: 100%; }
    .bb-hero-l h1 { font-size: 34px; }
    .bb-hero-sub { font-size: 17px; }
    .bb-h { font-size: 30px; }
    .bb-sub { font-size: 16px; }
    .bb-tile { flex: 1 1 100%; }
    .bb-down-qr { margin-left: 0; }
    .market .mk-title { font-size: 28px; }
}
@media (max-width: 640px) {
    .bb-row .sp { display: none; }
    .bb-auth { max-width: none; padding: 24px 18px; }
    .login-bg { padding: 24px 12px 40px; }
    .bb-panel, .bb-panel-card { padding: 10px; }
    .bb-news { padding: 2px 14px 16px; }
    .bb-news-head { padding: 14px 0 10px; }
    .bb-news-h { font-size: 18px; }
    .bb-news-item { gap: 12px; padding: 16px 0; }
    .bb-news-thumb { width: 84px; height: 58px; }
    .bb-news-it { font-size: 15px; }
    .bb-news-arrow { display: none; }
}