@charset "utf-8";
/* ============================================================
   BYBIT 深色金主题 · 全站前台统一
   与登录页 sign.css 同源配色：
     页面底 #0a0a0c · 面板 #131316 · 输入框 #17171b · 浮层 #1c1c21
     描边   #26262c · 主文字 #e8e8ec · 次要 #8b8b93 · 主金 #f0c14b
   引入位置：head.html / head2.html（在 ionic/style/home/user 之后，最后生效）
   ============================================================ */

/* ---------- 1. 页面根 ---------- */
html,
body {
    background: #0a0a0c !important;
    color: #e8e8ec;
}

.pane,
.view,
.ion-content,
.scroll-content,
.content-background {
    background-color: #0a0a0c !important;
}

.home,
.user-center,
.trade_history,
.trade_history_list,
.personalbg,
.about-w {
    background: #0a0a0c !important;
    color: #e8e8ec;
}

/* Ionic 默认浅色容器 */
.list,
.card,
.cards {
    background: #131316;
}

/* ---------- 2. 顶部栏 / 导航头 ---------- */
.bar,
.bar.bar-stable,
.bar-stable,
.headerbar,
.header,
.nav-bar-block {
    background-color: #131316 !important;
    border-color: #26262c;
    color: #e8e8ec;
}

.bar .title,
.bar-stable .title,
.title,
.header .title,
.order-modal-header .title {
    color: #ffffff !important;
    text-shadow: none;
}

/* 顶栏左右按钮（返回 / 关闭） */
.bar .button,
.bar .button-clear,
.bar-stable .button-clear,
.order-modal-header .close i,
.nav-bar-block .button-clear {
    color: #f0c14b !important;
    background: transparent !important;
}

.order-modal-header {
    background: #131316 !important;
    border-bottom: 1px solid #26262c;
}

/* 首页顶部品牌 LOGO：纯文字 + 金色竖条，不带底色/描边（否则会多出一层底） */
.header p em.brand-logo {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0;
}

.header p em.brand-logo i {
    background: #f0c14b;
}

/* ---------- 3. 底部标签栏 ---------- */
.navbar > .tab-nav {
    background-color: #131316 !important;
    border-top: 1px solid #26262c;
    color: #8b8b93;
}

.navbar > .tab-nav > .tab-item {
    color: #8b8b93 !important;
}

.navbar > .tab-nav > .tab-item.tab-item-active {
    color: #f0c14b !important;
}

.tab-nav .tab-title {
    color: inherit;
}

/* ---------- 4. 通用列表项 / 表单（Ionic） ---------- */
.list,
.item,
.item-complex .item-content,
.item-card {
    background-color: #131316;
    color: #e8e8ec;
}

.item {
    border-color: #26262c;
    margin: 0;
}

.item + .item {
    border-top-color: #26262c;
}

.item-divider,
.item-divider:last-child,
.item-input .input-label,
.item-stacked-label .input-label,
.item-note,
.item-icon-left,
.item-icon-right {
    background-color: #131316;
    color: #8b8b93;
}

.item-input,
.item-input-inset .input {
    background: #17171b;
}

.item-input input,
.item-input select,
.item-input textarea,
.input {
    background-color: #17171b;
    color: #ffffff;
    border-color: #2b2b32;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    background-color: #17171b;
    color: #ffffff;
}

input::placeholder,
textarea::placeholder,
.place-holder,
.item-input .input-label {
    color: #65656e;
}

.item-input:focus,
.input:focus {
    border-color: #f0c14b;
}

/* iOS 原生下拉箭头在深色下看不见 */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #8b8b93 50%),
                      linear-gradient(135deg, #8b8b93 50%, transparent 50%);
    background-position: right 14px top 50%, right 9px top 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ---------- 5. 按钮 ---------- */
.button,
.btn,
.btn-submit,
.button-balanced,
.button-positive,
.button-calm,
.btn-primary,
.btn-success,
.btn-info {
    background-color: #f0c14b;
    border-color: #f0c14b;
    color: #141414;
    font-weight: 600;
}

.button:active,
.button.activated,
.btn:active,
.btn-submit:active {
    background-color: #e0b23c;
    border-color: #e0b23c;
    color: #141414;
}

.button-stable,
.btn-default,
.btn-warning,
.btn-secondary {
    background-color: #17171b;
    border: 1px solid #3a3a42;
    color: #e8e8ec;
}

.button-assertive,
.btn-danger {
    background-color: #fa2e42;
    border-color: #fa2e42;
    color: #ffffff;
}

.button-clear,
.button-outline {
    background: transparent;
    color: #f0c14b;
    border-color: #f0c14b;
}

.button[disabled],
.btn[disabled],
.btn-submit[disabled] {
    background-color: #2b2b32 !important;
    border-color: #2b2b32 !important;
    color: #65656e !important;
}

/* ---------- 6. 首页 ---------- */
.home .bannar,
.home .notice-w,
.home .market,
.home .rate,
.home .rate .rate-hd,
.home .rate .rate-list .list-hd,
.home .rate .rate-list .list-hd li {
    background: #131316;
}

.home .rate .rate-hd li.cur {
    color: #f0c14b;
    border-bottom-color: #f0c14b;
}

.home .rate .rate-list .list-hd li,
.home .rate .rate-list .list .list-item .item-first,
.home .rate .rate-list .list .list-item .item-first em {
    color: #e8e8ec;
}

.home .notice,
.home .notice a,
.home .notice p {
    color: #a2a2aa;
}

.home .market .market-item .item-box {
    color: #e8e8ec;
}

.home .market .market-item .item-box dt {
    color: #8b8b93;
}

/* 行情条目分隔 */
.home .rate .rate-list .list .list-item,
.home .notice-w {
    border-color: #26262c;
}

/* 涨跌列表：价格 / 说明 / 涨跌徽标 */
.home .rate .rate-list .list .list-item {
    border-bottom: 1px solid #26262c;
}

.home .rate .rate-list .list .list-item .item-field p {
    color: #e8e8ec;
}

.home .rate .rate-list .list .list-item .item-field em {
    color: #8b8b93;
}

.home .rate .rate-list .list .list-item .item-field span {
    color: #ffffff;
}

.home .rate .rate-list .list .list-item .item-field .xiu {
    background: #3a3a42;
}

/* 轮播指示条（浅灰 → 深灰，激活态用金） */
.home .bannar .bannar-pagination .swiper-pagination-bullet {
    background: #3a3a42;
}

.home .bannar .bannar-pagination .swiper-pagination-bullet-active,
.home .market .market-pagination .swiper-pagination-bullet-active {
    background: #f0c14b;
}

.home .market .market-pagination .swiper-pagination-bullet {
    background: #3a3a42;
}

/* ---------- 7. 个人中心 ---------- */
.my-center-head,
.my-center-head .user,
.my-center-head .usdt,
.my-center-head .set-link {
    background-color: #131316;
    color: #e8e8ec;
}

.my-center-head .userinfo dt,
.my-center-head .userinfo dd,
.my-center-head .usdt dt,
.my-center-head .usdt dd {
    color: #e8e8ec;
}

.my-center-head .usdt dt {
    color: #8b8b93;
}

.my-center-head .set-link {
    color: #f0c14b;
    border: 1px solid #2b2b32;
    border-radius: 12px;
}

.my-center-head .user {
    border-bottom: 1px solid #26262c;
}

.my-center-section2 .links li a,
.common-module .left,
.common-module .left a {
    color: #e8e8ec;
}

.my-center-section2 .links li a {
    background: #17171b;
    border: 1px solid #2b2b32;
}

.common-module {
    background-color: #131316;
    border-bottom: 1px solid #26262c;
    color: #e8e8ec;
}

.common-module .right:before {
    border-color: #65656e transparent transparent #65656e;
}

.my-center-section3 .common-module:last-child {
    border-bottom: none;
}

/* ---------- 8. 记录 / 订单 / 表格 ---------- */
table,
.table,
.ordertable,
.ordertable th,
.ordertable td,
.trade_history header article {
    background-color: #131316;
    color: #e8e8ec;
    border-color: #26262c;
}

thead th,
thead td,
.ordertable th {
    background: #17171b;
    color: #8b8b93;
    border-bottom: 1px solid #26262c;
}

tbody tr,
tbody td {
    background: #131316;
    color: #e8e8ec;
    border-bottom: 1px solid #26262c;
}

/* 持仓/历史 顶部切换 */
.trade_history header {
    background: #131316;
    border-bottom: 1px solid #26262c;
}

.trade_history header article p {
    color: #8b8b93;
}

.trade_history header article.active p,
.trade_history header article.active {
    color: #f0c14b;
    border-bottom: 2px solid #f0c14b;
}

/* ---------- 9. 卡片 / 弹窗 / 二维码 ---------- */
.modal,
.modal-body,
.ion-modal-view,
.order-modal,
.layer,
.layer-m,
.layui-layer {
    background: #131316;
    color: #e8e8ec;
}

.layer-m .layer-text,
.layer-m {
    background: #1c1c21;
    color: #e8e8ec;
}

/* layer（弹层）统一深色见文末第 24 节：layer.css 由 layer.js 动态插入在本文件之后，
   故各处选择器用「双类/祖先+后代」抬高特异性，不依赖加载顺序 */
.layui-layer-title {
    background: #1c1c21 !important;
    color: #e8e8ec !important;
    border-bottom: 1px solid #2b2b32;
}

.layui-layer-setwin .layui-layer-close1,
.layui-layer-setwin .layui-layer-close2 {
    filter: none;
    opacity: .75;
}

/* ---------- 10. 文字色 / 链接 / 分隔线 ---------- */
a {
    color: #e5b93c;
}

a:active,
a:hover {
    color: #f0c14b;
}

.gray,
.grey,
.t-gray,
.tip,
.tips,
.placeholder,
.desc {
    color: #8b8b93 !important;
}

hr,
.divider {
    background: #26262c;
    border-color: #26262c;
}

/* 涨跌色保持原有语义（红涨绿跌），但补足深底对比度 */
.red,
.up {
    color: #fa2e42;
}

.green,
.down {
    color: #1fc65b;
}

/* ---------- 11. 充值页内联浅色兜底 ---------- */
.code-txt,
.form-item .input-txt {
    background: #17171b !important;
    color: #e8e8ec !important;
    border-color: #2b2b32 !important;
}

/* ---------- 12. 滚动条 / 选中态（桌面预览用） ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #2b2b32;
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: #131316;
}

::selection {
    background: #f0c14b;
    color: #141414;
}

/* ---------- 13. 补漏：ID 选择器 / 其余浅色残留 ---------- */

/* K 线图容器（模板内联把源样式 #081724 盖成了白色，这里统一收回深色） */
#container {
    background: #0a0a0c !important;
}

#container > .txt1 > span,
#container > .txt2 > span {
    color: #e8e8ec;
}

/* 订单详情 / 交易面板的金色按钮，与主题金对齐 */
.order-detail-view .button,
.trade-view .order-state-panel .button {
    background: #f0c14b;
    border-color: #f0c14b;
    color: #141414;
}

/* 热门推荐 */
.index-hot .title {
    color: #e8e8ec;
    border-bottom-color: #26262c;
}

.index-hot .items li:after {
    background: #26262c;
}

.index-deal-item {
    border-bottom-color: #26262c;
}

.index-deal-item .img {
    background-color: #17171b;
}

.index-deal-item .name,
.index-deal-item .price {
    color: #e8e8ec;
}

/* 个人页 / 关于页小字 */
.personalbg ul li section p {
    color: #8b8b93;
}

/* ---------- 14. 交易记录左右滑块（原为白底） ---------- */
.trade_history_list .slider-slide,
.trade_history .slider-slide,
.trade_history .slider-slides,
.ion-slide {
    background-color: #0a0a0c !important;
}

/* ---------- 15. 主提交按钮（模板内联是绿底白字，对比度不足，统一成主题金） ---------- */
.btn-submit,
.btn-submit.button-balanced,
.button.button-balanced {
    background-color: #f0c14b !important;
    border-color: #f0c14b !important;
    color: #141414 !important;
    font-weight: 600;
    letter-spacing: .02em;
}

.btn-submit:active,
.btn-submit.activated {
    background-color: #e0b23c !important;
    border-color: #e0b23c !important;
    color: #141414 !important;
}

/* ---------- 15b. 主提交按钮禁用态（必须比 15 节更具体，否则被金色 !important 盖住，禁用时看着仍可点） ---------- */
.btn-submit.button-balanced[disabled],
.btn-submit[disabled],
.button.button-balanced[disabled],
.btn[disabled] {
    background-color: #2b2b32 !important;
    border-color: #2b2b32 !important;
    color: #9d9da6 !important;   /* 与 #2b2b32 对比 5.2，避免禁用文案看不清 */
    cursor: not-allowed;
    opacity: 1;
}

/* ---------- 16. 首页行情三栏精排（原：名称被 76px 方框挤扁、涨跌是实心色块） ---------- */
.home .rate .rate-list .list-hd li {
    color: #8b8b93 !important;
    font-size: 11px;
    letter-spacing: .04em;
    background: transparent !important;
}

.home .rate .rate-list .list .list-item .item-field .field-group {
    display: block;
}

.home .rate .rate-list .list .list-item .item-field .field-group span {
    display: block;
    width: auto !important;
    height: auto !important;
    line-height: 20px !important;
    text-align: left !important;
    color: #e8e8ec !important;
    font-size: 15px !important;
    font-weight: 600;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home .rate .rate-list .list .list-item .item-field .field-group em {
    display: none;
}

.home .rate .rate-list .list .list-item .item-field p {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 20px !important;
}

.home .rate .rate-list .list .list-item .item-field span.up,
.home .rate .rate-list .list .list-item .item-field span.down,
.home .rate .rate-list .list .list-item .item-field span.xiu {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    line-height: 18px !important;
    padding: 4px 9px;
    border-radius: 4px;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600;
    background: rgba(255, 255, 255, .06) !important;
}

.home .rate .rate-list .list .list-item .item-field span.up {
    background: rgba(250, 46, 66, .16) !important;
    color: #fa5666 !important;
}

.home .rate .rate-list .list .list-item .item-field span.down {
    background: rgba(3, 173, 143, .16) !important;
    color: #22c9a7 !important;
}

.home .rate .rate-list .list .list-item .item-field span.xiu {
    color: #8b8b93 !important;
}

/* ---------- 17. 行情行高与分隔（原 42px 行高偏挤、分隔线过重） ---------- */
.home .rate .rate-list .list .list-item {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

.home .rate .rate-list .list .list-item:last-child {
    border-bottom: none !important;
}

.home .rate .rate-list .list .list-item:active {
    background: #17171b;
}

/* ---------- 18. 只读输入框（审核态底色与页面同色看不出边界） ---------- */
.kyc-input[readonly] {
    background: #161a1f !important;
    border-color: #2b3139 !important;
    color: #a7b0bc !important;
}

/* ---------- 19. 首页卡片化（原：横幅出血、白分隔线、红底快捷块） ---------- */
/* 横幅：coverflow 3D 轮播，必须满宽、不能裁切（内缩+裁切会变成左右两半）。
   高度 156→180，图片 95% 留边 → 满幅铺满，否则轮播图显小、两侧还有白缝 */
.home .bannar {
    margin: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    height: 180px;
}

.home .bannar .swiper-container {
    padding-left: 0;
}

.home .bannar .swiper-slide {
    overflow: hidden;
    background: #0a0a0c;
}

.home .bannar .swiper-slide img {
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: cover;
    -webkit-object-fit: cover;
}

.home .bannar .bannar-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .35);
}

.home .bannar .bannar-pagination .swiper-pagination-bullet-active {
    background: #f0c14b;
}

.home .notice-w {
    margin: 12px 10px 0;
    background: #131316;
    border-radius: 8px;
    overflow: hidden;
}

/* 公告行下面那条刺眼白线 */
.home .notice {
    border-bottom: none !important;
}

.home .notice span {
    background: #f0c14b;
    color: #141414 !important;
}

/* 三币种行情条：做成卡片，价格白字、涨跌保留语义色
   （高度必须锁回 96px，否则 swiper 会把这一块撑成大空块、交易对被顶掉） */
.home .market {
    margin: 12px 10px 0;
    background: #131316;
    border-radius: 8px;
    overflow: hidden;
    padding: 15px 0 0;
    height: 96px;
}

.home .market .market-item .item-box dt {
    color: #8b8b93;
}

.home .market .market-item .item-box dd p {
    color: #ffffff !important;
    padding-top: 8px;
}

.home .market .market-item .item-box dd span {
    color: inherit;
    opacity: .95;
}

/* 快捷入口：红底 → 深色面板 + 金色标题 */
.home .info {
    margin-top: 12px;
}

.home .info .info-pay {
    background: #131316 !important;
    border: 1px solid #26262c;
    border-radius: 8px;
}

.home .info .info-pay dl dt span {
    color: #f0c14b !important;
}

.home .info .info-pay dl dt em {
    color: #8b8b93 !important;
}

.home .info .info-detail dl {
    background: #131316 !important;
    border: 1px solid #26262c;
    border-radius: 8px;
    color: #e8e8ec;
}

.home .info .info-detail a + a {
    margin-top: 10px;
}

/* 邀请横幅 */
.home .show {
    padding: 12px 10px;
}

/* 涨幅榜整块卡片化 + tab 下划线 */
.home .rate {
    margin: 0 10px;
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 12px;
}

.home .rate .rate-hd {
    border-bottom: none !important;
    padding: 16px 4px 0;
}

.home .rate .rate-hd li {
    padding: 0 12px 9px;
    border-bottom: 2px solid transparent;
    margin-right: 8px;
}

.home .rate .rate-hd li.cur {
    color: #f0c14b !important;
    border-bottom-color: #f0c14b !important;
}

.home .rate .rate-list .list-hd {
    background: transparent !important;
    padding-top: 4px;
}

/* ---------- 20. 个人中心按钮与分隔线 ---------- */
.my-center-section2 {
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}

/* li 上原带红/蓝渐变底，会从透明的 <a> 里透出来，先清掉 */
.my-center-section2 .links li {
    background: transparent !important;
    border-radius: 6px;
}

.my-center-section2 .links li a {
    background: #131316;
    border: 1px solid #26262c;
    border-radius: 6px;
    color: #e8e8ec;
}

.my-center-section2 .links li.link1 a {
    background: #f0c14b !important;
    border-color: #f0c14b !important;
    color: #141414 !important;
    font-weight: 600;
}

.my-center-section2 .links li.link2 a {
    background: transparent !important;
    border-color: #f0c14b !important;
    color: #f0c14b !important;
    font-weight: 600;
}

.common-module {
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}

.common-module:active {
    background: #17171b;
}

/* ---------- 21. 个人中心：语言切换按钮与语言列表 ---------- */
.my-center-section3 .lang-row {
    cursor: pointer;
}

.my-center-section3 .lang-row .left .icon-img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    -webkit-object-fit: cover;
    border-radius: 2px;
    margin-right: 9px;
    vertical-align: middle;
}

.my-center-section3 .lang-row .lang-cur {
    display: inline-block;
    margin-left: 10px;
    font-style: normal;
    font-size: 13px;
    color: #8b8b93;
}

.lang-picker {
    list-style: none;
    margin: 0;
    padding: 2px 0 8px;
    background: #131316;
    border-bottom: 1px solid #26262c;
}

.lang-picker li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 13px 4%;
    font-size: 14px;
    color: #e8e8ec;
}

.lang-picker li a:active {
    background: #17171b;
}

.lang-picker li a img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    -webkit-object-fit: cover;
    border-radius: 2px;
    margin-right: 10px;
}

.lang-picker li a span {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: left;
}

.lang-picker li a .lang-yes {
    font-style: normal;
    font-size: 15px;
    color: #f0c14b;
    opacity: 0;
}

.lang-picker li.cur a {
    color: #f0c14b;
}

.lang-picker li.cur a .lang-yes {
    opacity: 1;
}

/* ---------- 22. K 线页（下单页）布局重排：报价区 / 导航栏 / 图例 / 底部按钮 ---------- */

/* 22.1 涨跌色统一到主题色（模板与 JS 用的是 #fa2e42 / #1fc65b） */
.trade-content header .rise {
    color: #fa2e42 !important;
}

.trade-content header .fall {
    color: #2db492 !important;
}

/* 22.2 报价区：现价独占一行大字，开/低/高 三等分（原为 40/20/20/20 一行挤、数字溢出重叠） */
.trade-content header {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0.14rem 0.16rem 0.16rem;
    background: #131316;
    border-bottom: 1px solid #1f1f24;
    box-sizing: border-box;
}

.trade-content header section:nth-of-type(1) {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    width: 100%;
    height: auto;
    padding: 0;
    margin-bottom: 0.09rem;
    font-size: 0.42rem;
    line-height: 1.1;
    text-align: left;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.trade-content header section {
    -webkit-flex-basis: 33.33%;
    flex-basis: 33.33%;
    width: 33.33%;
    height: auto;
    padding-top: 0;
}

.trade-content header section p {
    margin: 0;
    height: auto;
    line-height: 1.3;
    font-size: 0.14rem;
    width: 100%;
    text-align: left;
    color: #8b8b93;
}

.trade-content header section p:nth-of-type(2) {
    font-size: 0.18rem;
    font-weight: 600;
    margin-top: 0.02rem;
    /* 只让现价带涨跌色，开/低/高 用中性白（模板 .rise/.fall 带 !important，故此处也要 !important） */
    color: #e8e8ec !important;
}

/* 22.3 导航栏：原白底 + 白底金字（对比度 1.67）→ 深色 + 金色分段控件 */
.trade-content nav {
    height: auto;
    padding: 0.05rem 0.1rem;
    background: #131316;
    border-bottom: 1px solid #1f1f24;
    box-sizing: border-box;
}

.trade-content nav section {
    flex: 1;
    color: #8b8b93;
    margin-top: 0;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    font-size: 0.12rem;
    font-weight: 600;
    white-space: nowrap;
}

.trade-content nav article {
    padding: 0;
    flex: 2;
    height: 0.3rem;
    display: flex;
    margin-top: 0;
    border-radius: 0.15rem;
    background: #1a1a1f;
    border: 1px solid #26262c;
    box-sizing: border-box;
}

.trade-content nav article span {
    display: inline-block;
    height: 0.28rem;
    margin-top: 0;
    flex: 1;
    text-align: center;
    font-weight: 600;
    line-height: 0.28rem;
    color: #8b8b93;
}

.trade-content nav article span.active {
    color: #141414;
    background: #f0c14b;
    border-radius: 0.15rem;
    box-shadow: none;
}

.trade-content nav section.active {
    color: #141414;
    background: #f0c14b;
    border-bottom: none;
    border-radius: 0.06rem;
}

/* 22.4 图例：原红/蓝/绿/黄裸色值，蓝绿在深底上对比度只有 2.3/3.85；补 现/开/低/高 标签 */
#container > .txt1 > span,
#container > .txt2 > span {
    color: #e8e8ec;
    font-weight: 600;
}

#container > .txt1 > span b {
    color: #8b8b93;
    font-weight: 600;
    margin-right: 2px;
    /* reset.css 给 b 设了 font-size:small(13px)，会把标签撑得比数值还大 */
    font-size: 10px;
}

#container > .txt1 > span.a {
    color: #8b8b93;
}

#container > .txt1 > span.b {
    color: #ffffff;
}

#container > .txt1 > span.c {
    color: #f0c14b;
}

#container > .txt1 > span.d {
    color: #2db492;
}

#container > .txt1 > span.e {
    color: #ff7a88;
}

#container > .txt2 > span.a,
#container > .txt2 > span.b,
#container > .txt2 > span.c {
    color: #8b8b93;
}

#container > .txt2 > span.a i {
    color: #13e9ec;
}

#container > .txt2 > span.b i {
    color: #fa5666;
}

#container > .txt2 > span.c i {
    color: #e8e8ec;
}

/* reset.css 给 i 设了 font-size:large(18px)，DIFF/DEA/MACD 数值被撑到 18px */
#container > .txt2 > span i {
    font-size: 10px;
    font-style: normal;
}

/* 22.5 底部按钮：原 持仓芥末黄 / 买涨粉红 / 买跌荧光绿，且字色 #252323 对比不足 */
.trade-view .trade_bar {
    height: auto;
    min-height: 0.56rem;
    background: #0f0f12;
    border-top: 1px solid #1f1f24;
    padding: 0.05rem 0.08rem calc(0.05rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.trade-view .trade_bar section {
    -webkit-flex-basis: 34%;
    flex-basis: 34%;
    height: 0.46rem;
    font-size: 0.12rem;
    text-align: center;
    padding-top: 0.04rem;
    margin: 0 0.02rem;
    border-radius: 0.05rem;
    box-sizing: border-box;
}

.trade-view .trade_bar section p {
    margin: 0;
    height: 0.2rem;
    line-height: 0.2rem;
    font-weight: 600;
}

.trade-view .trade_bar section i {
    font-size: 0.16rem;
    height: 0.2rem;
    line-height: 0.2rem;
}

.trade-view .trade_bar section:nth-of-type(1) {
    -webkit-flex-basis: 30%;
    flex-basis: 30%;
    background: #17171b;
    border: 1px solid #2a2a31;
    color: #f0c14b;
    padding-top: 0.03rem;
}

.trade-view .trade_bar section:nth-of-type(2) {
    background: #e11d36;
    color: #ffffff;
}

.trade-view .trade_bar section:nth-of-type(3) {
    background: #0d7f68;
    color: #ffffff;
}

.trade-view .trade_bar section:nth-of-type(1) p span {
    color: #f0c14b;
}

.trade-view .trade_bar section:nth-of-type(2) p span,
.trade-view .trade_bar section:nth-of-type(3) p span {
    color: #ffffff;
}

/* ---------- 23. 个人中心高级感重排：资产卡 + 分组卡片 + 图标徽章 ---------- */

/* 23.1 头部与操作按钮合成一张圆角「资产卡」，顶部带微弱金色光晕 */
.my-center-head {
    margin: 10px 12px 0;
    background-color: transparent;
    background-image:
        radial-gradient(130% 78% at 86% -20%, rgba(240, 193, 75, .17), rgba(240, 193, 75, 0) 62%),
        linear-gradient(180deg, #18181d 0%, #111114 100%);
    border: 1px solid #26262c;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}

.my-center-head .user,
.my-center-head .usdt {
    background-color: transparent;
}

/* 身份行 */
.my-center-head .user {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 16px 15px 14px;
    border-bottom: 1px solid #1f1f24;
}

/* 头像：品牌圆标 + 金环 */
.my-center-head .img {
    width: 46px;
    height: 46px;
    -webkit-flex: 0 0 46px;
    flex: 0 0 46px;
    border: 2px solid rgba(240, 193, 75, .55);
    -webkit-box-shadow: 0 0 0 3px rgba(240, 193, 75, .08);
    box-shadow: 0 0 0 3px rgba(240, 193, 75, .08);
    background: #101014;
}

.my-center-head .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-center-head .userinfo {
    padding-left: 13px;
    min-width: 0;
}

.my-center-head .userinfo dt {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .01em;
}

.my-center-head .userinfo dd {
    margin-top: 5px;
    line-height: 1.15;
    font-size: 12px;
    color: #8b8b93;
}

.my-center-head .userinfo dd .bal-l {
    margin-right: 8px;
    color: #8b8b93;
    font-size: 12px;
    font-weight: 400;
}

.my-center-head .userinfo dd .bal-v {
    font-size: 21px;
    font-weight: 800;
    color: #f0c14b;
    letter-spacing: -.01em;
    -moz-font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    vertical-align: -1px;
}

/* 设置：低调的次级按钮 */
.my-center-head .set-link {
    top: 15px;
    right: 13px;
    width: auto;
    white-space: nowrap;
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    color: #e8e8ec;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid #2f2f37;
    border-radius: 9px;
}

/* 统计行 */
.my-center-head .usdt {
    padding: 13px 4% 14px;
    border-bottom: 1px solid #1f1f24;
}

.my-center-head .usdt dl:first-child {
    border-right: 1px solid #26262c;
}

.my-center-head .usdt dt {
    font-size: 12px;
    color: #8b8b93;
    letter-spacing: .02em;
}

.my-center-head .usdt dd {
    margin-top: 6px;
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    -moz-font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* 23.2 操作按钮：接在资产卡下方（充值为主金色排左，提现为描边） */
.my-center-section2 {
    margin: 0 12px;
    padding: 13px 14px 15px;
    background: linear-gradient(180deg, #111114 0%, #0f0f12 100%);
    border: 1px solid #26262c;
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}

.my-center-section2 .links {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-top: 0;
}

.my-center-section2 .links li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    width: auto;
    height: 46px;
    line-height: 44px;
    padding: 0 5px;
    border-radius: 12px;
    font-size: 15px;
}

/* 充值排到左侧（DOM 里提现在前，用 order 换位，不改结构） */
.my-center-section2 .links li.link2 {
    -webkit-order: -1;
    order: -1;
}

.my-center-section2 .links li a {
    display: block;
    height: 100%;
    line-height: 44px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

.my-center-section2 .links li.link2 a {
    background: #f0c14b !important;
    border-color: #f0c14b !important;
    color: #141414 !important;
}

.my-center-section2 .links li.link1 a {
    background: transparent !important;
    border-color: #3a3a44 !important;
    color: #f0c14b !important;
}

/* 23.3 菜单三张分组卡片：记录 / 服务 / 退出 */
.my-center-section3 {
    padding: 12px 0 26px;
}

.my-center-section3 > a.common-module {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 54px;
    padding: 0 14px;
    margin: 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #e8e8ec;
    background-color: #131316;
    border: none;
    border-left: 1px solid #26262c;
    border-right: 1px solid #26262c;
    border-top: 1px solid #1c1c22;
    border-radius: 0;
}

/* .clearfix 的 ::before/::after 在 flex 容器里会变成 flex item，
   把 space-between 的空隙三等分，导致内容不贴左 —— 直接关掉 */
.my-center-section3 > a.common-module:before,
.my-center-section3 > a.common-module:after {
    content: none;
    display: none;
}

/* 组内分隔线比外框暗一档 */
.my-center-section3 > a.common-module:nth-of-type(1),
.my-center-section3 > a.common-module:nth-of-type(4),
.my-center-section3 > a.common-module:nth-of-type(7) {
    border-top-color: #26262c;
    border-radius: 14px 14px 0 0;
}

/* 组末行封口并留出组间距 */
.my-center-section3 > a.common-module:nth-of-type(3),
.my-center-section3 > a.common-module:nth-of-type(6) {
    border-bottom: 1px solid #26262c;
    border-radius: 0 0 14px 14px;
    margin-bottom: 12px;
}

.my-center-section3 > a.common-module:nth-of-type(7) {
    border-bottom: 1px solid #26262c;
    border-radius: 14px;
    background-image: none;
    -webkit-justify-content: center;
    justify-content: center;
    color: #fa2e42;
}

.my-center-section3 > a.common-module:nth-of-type(7) .left {
    color: #fa2e42;
    font-weight: 600;
}

.my-center-section3 > a.common-module:nth-of-type(7) .right {
    display: none;
}

.my-center-section3 .common-module .left {
    font-size: 15px;
    font-weight: 600;
    color: #e8e8ec;
    letter-spacing: .01em;
}

/* 图标徽章：圆角深色底 + 细描边，统一各行质感 */
.my-center-section3 > a.common-module:not(.lang-row) .icon-img {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 0 12px 0 0;
    padding: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #1a1a21;
    border: 1px solid #2a2a31;
    border-radius: 10px;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: middle;
}

/* 语言行的旗帜同样进徽章 */
.my-center-section3 .lang-row .left .icon-img {
    width: 34px;
    height: 34px;
    margin: 0 12px 0 0;
    padding: 8px 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #1a1a21;
    border: 1px solid #2a2a31;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: middle;
}

.my-center-section3 .lang-row .left .lang-cur {
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    color: #8b8b93;
    background: #1a1a21;
    border: 1px solid #2a2a31;
    border-radius: 6px;
}

/* 语言面板：卡片之间的嵌套面板 */
.my-center-section3 .lang-picker {
    margin: 10px 12px 12px;
    padding: 4px 0 6px;
    background: #17171b;
    border: 1px solid #26262c;
    border-radius: 12px;
    overflow: hidden;
}

.my-center-section3 .lang-picker li a {
    padding: 12px 14px;
}

.my-center-section3 > a.common-module:active {
    background: #191920;
}

/* 页脚品牌字：填补底部留白，字母间距靠 text-indent 抵消尾部空隙 */
.my-center-section3 .uc-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .38em;
    text-indent: .38em;
    color: #787881;
}

/* ---------- 24. layer 弹层深色化（layer.msg 成功提示 / 确认框） ----------
   注意：layer.msg 生成的节点同时带 layui-layer-dialog，故 msg 规则必须排在 dialog 之后，
   并用更高特异性盖掉 dialog 的 padding/min-width/图标绝对定位 */
/* 注意：必须带 body 前缀抬高特异性。layer.css 由 layer.js 动态插在本文件之后，
   裸 .layui-layer（0,1,0）会被 layer 自带的 background-color:#fff 和
   .layui-layer-msg{border:1px solid #D3D4D3} 反超，弹窗就变成「白底灰边」。 */
body .layui-layer {
    background: #17171b;
    border: 1px solid #2f2f37;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    color: #e8e8ec;
    min-width: 0;
}

.layui-layer .layui-layer-content {
    background: #17171b;
    color: #e8e8ec;
}

/* loading 还原成圆形：上面的 body .layui-layer 会把 border-radius 压成 14px、
   border 补成 1px，而 layer 原生 loading 要求 border:none + 100% 圆角 */
body .layui-layer.layui-layer-loading {
    background: transparent;
    border: none;
    border-radius: 100%;
    box-shadow: none;
}

/* 提示文本（layer.msg / $.alert） */
.layui-layer.layui-layer-dialog {
    min-width: 0;
    max-width: 86%;
}

.layui-layer.layui-layer-dialog .layui-layer-content {
    padding: 18px 20px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.layui-layer.layui-layer-dialog .layui-layer-content.layui-layer-padding {
    padding: 18px 20px;
    text-align: center;
}

/* 确认/取消按钮 */
.layui-layer.layui-layer-dialog .layui-layer-btn {
    padding: 0 12px 14px;
    margin-top: 2px;
}

.layui-layer.layui-layer-dialog .layui-layer-btn a {
    height: 34px;
    line-height: 32px;
    padding: 0 18px;
    background: transparent;
    border: 1px solid #3a3a44;
    border-radius: 10px;
    color: #e8e8ec;
    font-size: 14px;
}

.layui-layer.layui-layer-dialog .layui-layer-btn .layui-layer-btn0 {
    background: #f0c14b;
    border-color: #f0c14b;
    color: #141414;
    font-weight: 600;
}

/* 成功/失败 toast（居中一行） */
.layui-layer.layui-layer-msg {
    min-width: 0;
    max-width: 84%;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.layui-layer.layui-layer-msg .layui-layer-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 12px 18px !important;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    overflow: visible;
    white-space: nowrap;
}

/* 图标：原皮肤是裸图形，垫一个圆形徽章（icon.png 相对 theme.css 会解析错，写绝对路径） */
.layui-layer.layui-layer-msg .layui-layer-content .layui-layer-ico {
    position: static;
    display: inline-block;
    -webkit-flex: 0 0 30px;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
    background-color: rgba(45, 180, 146, .14);
    box-shadow: inset 0 0 0 1px rgba(45, 180, 146, .34);
    background-image: url(/static/layer/skin/default/icon.png);
    background-repeat: no-repeat;
    background-position: -30px 0;
}

.layui-layer.layui-layer-msg .layui-layer-content .layui-layer-ico2 {
    background-color: rgba(250, 46, 66, .14);
    box-shadow: inset 0 0 0 1px rgba(250, 46, 66, .34);
    background-position: -60px 0;
}

/* 移动端：页面只允许上下滚动，禁止左右移动
   theme.css 最后加载，兜底覆盖各页 <style> 里的 overflow:scroll */
.scroll-content,
.user-center-main,
.view-container .home-content {
    overflow-x: hidden;
}