@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（弹层）皮肤由 layer.js 动态加载，可能晚于本文件，故加 !important */
.layui-layer {
    background: #131316 !important;
    border: 1px solid #2b2b32;
    border-radius: 8px;
    color: #e8e8ec;
}

.layui-layer-title {
    background: #1c1c21 !important;
    color: #e8e8ec !important;
    border-bottom: 1px solid #2b2b32;
}

.layui-layer-content {
    background: #131316 !important;
    color: #e8e8ec !important;
}

.layui-layer-btn a {
    color: #f0c14b !important;
}

.layui-layer-msg {
    background: #1c1c21 !important;
    color: #e8e8ec !important;
    border-color: #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;
}

/* ---------- 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;
}