@charset "utf-8";

:root {
    --ex-bg: #0b0e11;
    --ex-bg-2: #12161c;
    --ex-card: #1e2329;
    --ex-card-2: #181a20;
    --ex-line: #2b3139;
    --ex-text: #eaecef;
    --ex-muted: #848e9c;
    --ex-yellow: #fcd535;
    --ex-yellow-hover: #f0b90b;
    --ex-green: #0ecb81;
    --ex-red: #f6465d;
    --ex-blue: #3b82f6;
}

@media screen and (min-width: 1025px) {

/* Header — Binance-like */
header {
    height: 64px !important;
    min-width: 1200px !important;
    background: rgba(11, 14, 17, 0.92) !important;
    border-bottom: 1px solid var(--ex-line) !important;
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
}
header .left_box .logo_box { padding: 12px 24px !important; }
header .left_box .logo_box .logo_img { height: 32px !important; }
header .left_box .nav_box { margin-left: 8px !important; width: auto !important; }
header .left_box .nav_box .nav_item,
header .right_box .nav_right_box .nav_item {
    height: 64px !important;
    line-height: 64px !important;
    margin-right: 4px !important;
    padding: 0 14px !important;
    color: var(--ex-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}
header .left_box .nav_box .nav_item:hover,
header .right_box .nav_right_box .nav_item:hover {
    color: var(--ex-text) !important;
}
header .left_box .nav_box .nav_item.active,
header .right_box .nav_right_box .nav_item.active {
    color: var(--ex-yellow) !important;
    border-bottom: 2px solid var(--ex-yellow) !important;
    height: 62px !important;
}
header .right_box .nav_right_box { width: auto !important; padding-right: 16px; }
header .right_box .nav_right_box .nav_item { margin-left: 4px !important; margin-right: 0 !important; }
header .right_box .nav_right_box .nav_item.language {
    width: auto !important;
    min-width: 88px;
    border-left: 1px solid var(--ex-line) !important;
    color: var(--ex-muted) !important;
}
header .right_box .nav_right_box .nav_item.language .language_box {
    top: 64px !important;
    background: var(--ex-card) !important;
    border: 1px solid var(--ex-line) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
header .right_box .nav_right_box .nav_item.language .language_box .language_item {
    border-top: 1px solid var(--ex-line) !important;
    color: var(--ex-muted) !important;
}
header .right_box .nav_right_box .nav_item.language .language_box .language_item:hover {
    color: var(--ex-yellow) !important;
    background: rgba(252, 213, 53, 0.08);
}
header .right_box .nav_right_box .nav_item.login {
    color: var(--ex-text) !important;
    height: 36px !important;
    line-height: 36px !important;
    margin-top: 14px !important;
    padding: 0 16px !important;
    border: 1px solid var(--ex-line) !important;
    border-radius: 6px !important;
}
header .right_box .nav_right_box .nav_item.register {
    color: #0b0e11 !important;
    background: var(--ex-yellow) !important;
    height: 36px !important;
    line-height: 36px !important;
    margin-top: 14px !important;
    padding: 0 18px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}
header .right_box .nav_right_box .nav_item.register:hover { background: var(--ex-yellow-hover) !important; color: #0b0e11 !important; }
header .right_box .nav_right_box .nav_item.account { color: var(--ex-yellow) !important; }
header .right_box .nav_right_box .nav_item.app img {
    top: 64px !important;
    border-radius: 12px;
    border: 1px solid var(--ex-line);
    background: #fff;
    padding: 8px;
}

/* Footer */
body > footer,
footer {
    background: #0b0e11 !important;
    border-top: 1px solid var(--ex-line);
    padding: 56px 0 40px !important;
}
footer .center_box { width: 1200px; }
footer .center_box .left_box .footer_copyright_info { color: var(--ex-muted) !important; }
footer .center_box .right_box .footer_link_list .list_title {
    color: var(--ex-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}
footer .center_box .right_box .footer_link_list .link_item { color: var(--ex-muted) !important; }
footer .center_box .right_box .footer_link_list .link_item:hover { color: var(--ex-yellow) !important; }

/* Homepage */
.body_box { min-width: 1200px; }
.body_box .index_hero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 80% at 80% 20%, rgba(252, 213, 53, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 60% at 10% 80%, rgba(14, 203, 129, 0.08), transparent 50%),
        #0b0e11;
}
.body_box .index_hero .index_banner { height: 420px !important; margin-top: 0 !important; }
.body_box .index_hero .hero_copy {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 560px;
}
.body_box .index_hero .hero_kicker {
    color: var(--ex-yellow);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.body_box .index_hero .hero_title {
    font-size: 46px !important;
    line-height: 1.15 !important;
    font-weight: 800;
    color: #fff !important;
    margin-bottom: 16px;
}
.body_box .index_hero .hero_sub {
    font-size: 16px !important;
    color: #b7bdc6 !important;
    line-height: 1.7;
    margin-bottom: 28px;
}
.body_box .index_hero .hero_actions a {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    font-weight: 700;
    margin-right: 12px;
}
.body_box .index_hero .hero_actions .btn_primary {
    background: var(--ex-yellow);
    color: #0b0e11 !important;
}
.body_box .index_hero .hero_actions .btn_primary:hover { background: var(--ex-yellow-hover); }
.body_box .index_hero .hero_actions .btn_ghost {
    border: 1px solid var(--ex-line);
    background: rgba(30,35,41,0.7);
    color: var(--ex-text) !important;
}

.body_box .index_price_bar { margin: 0 !important; padding: 16px 24px 8px; display: flex; gap: 12px; box-sizing: border-box; }
.body_box .index_price_bar .clear { display: none; }
.body_box .index_price_bar .price_bar_item {
    float: none !important;
    width: auto !important;
    flex: 1;
    background: var(--ex-card) !important;
    color: var(--ex-muted) !important;
    border: 1px solid var(--ex-line);
    border-radius: 12px;
    overflow: hidden;
}
.body_box .index_price_bar .price_bar_item:hover {
    background: #252b33 !important;
    border-color: rgba(252, 213, 53, 0.35);
    transform: translateY(-2px);
}
.body_box .index_price_bar .price_bar_item .item_center { border-right: none !important; padding: 18px 16px !important; }
.body_box .index_price_bar .price_bar_item .item_center .market_symbol { color: var(--ex-muted) !important; font-weight: 600; }
.body_box .index_price_bar .price_bar_item .item_center .market_price { color: #fff !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.body_box .index_price_bar .price_bar_item .item_center .market_price_rate { color: var(--ex-green) !important; font-weight: 700; }
.body_box .index_price_bar .price_bar_item .item_center .market_price_rate.down { color: var(--ex-red) !important; }

.body_box .index_news_box {
    background: transparent !important;
    margin: 4px 24px 0 !important;
    border: 1px solid var(--ex-line);
    border-radius: 8px;
    background: var(--ex-card) !important;
    color: var(--ex-muted) !important;
    line-height: 48px !important;
}
.body_box .index_news_box .news_item { color: var(--ex-text) !important; }
.body_box .index_news_box .news_item:hover { color: var(--ex-yellow) !important; }

.body_box .index_price_list {
    background: transparent !important;
    padding: 28px 24px 48px !important;
}
.body_box .index_price_list .center_box {
    margin: 0 auto !important;
    max-width: 1200px;
    border: 1px solid var(--ex-line) !important;
    border-radius: 16px !important;
    background: var(--ex-card);
    overflow: hidden;
}
.body_box .index_price_list .center_box .tab_box {
    background: var(--ex-card-2) !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid var(--ex-line);
}
.body_box .index_price_list .center_box .tab_box .tab_item {
    color: var(--ex-muted) !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 700;
}
.body_box .index_price_list .center_box .tab_box .tab_item:hover,
.body_box .index_price_list .center_box .tab_box .tab_item.active {
    color: var(--ex-yellow) !important;
    border-bottom-color: var(--ex-yellow) !important;
    height: 30px !important;
}
.body_box .index_price_list .center_box .tab_content .tab_content_item table thead { background: #161a1e !important; }
.body_box .index_price_list .center_box .tab_content .tab_content_item table thead th { color: var(--ex-muted) !important; }
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody td {
    color: var(--ex-text) !important;
    border-top: 1px solid var(--ex-line) !important;
    font-variant-numeric: tabular-nums;
}
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody tr:hover { background: rgba(252, 213, 53, 0.06) !important; }
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody td .small_font { color: var(--ex-muted) !important; }
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody td .price_up {
    background: rgba(14, 203, 129, 0.16) !important;
    border: none !important;
    color: var(--ex-green) !important;
    border-radius: 4px !important;
    font-weight: 700;
}
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody td .price_down {
    background: rgba(246, 70, 93, 0.16) !important;
    border: none !important;
    color: var(--ex-red) !important;
    border-radius: 4px !important;
    font-weight: 700;
}
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody td .price_up_text { color: var(--ex-green) !important; }
.body_box .index_price_list .center_box .tab_content .tab_content_item table tbody td .price_down_text { color: var(--ex-red) !important; }

.body_box .index_info_box_1,
.body_box .index_info_box_2 {
    background: transparent !important;
    padding-top: 48px !important;
}
.body_box .index_info_box_1 .info_float_bg,
.body_box .index_info_box_3 .info_float_bg { display: none; }
.body_box .index_info_box_1 .center_box .center_text_1,
.body_box .index_info_box_2 .center_text_1 {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.body_box .index_info_box_1 .center_box .center_text_2,
.body_box .index_info_box_2 .center_text_2 { color: var(--ex-muted) !important; }
.body_box .index_info_box_2 .center_info .info_item .item_text_1 { color: #fff !important; }
.body_box .index_info_box_2 .center_info .info_item .item_text_2 { color: var(--ex-muted) !important; }
.body_box .index_info_box_2 .center_info .info_item {
    box-sizing: border-box;
    padding: 8px;
}
.body_box .index_info_box_3 {
    background: linear-gradient(180deg, transparent, rgba(252,213,53,0.06)) !important;
    padding: 64px 0 80px !important;
}
.body_box .index_info_box_3 .info_text_1,
.body_box .index_info_box_3 .info_text_2 { color: var(--ex-text) !important; }

/* Account / generic panels */
.account_box { }
.account_box .page_title,
.account_box .left_box,
.account_box .right_box {
    background: var(--ex-card) !important;
    border: 1px solid var(--ex-line);
    border-radius: 12px;
}
.account_box .page_title { border-bottom: none !important; color: var(--ex-text) !important; font-weight: 700; }
.account_box .left_box .account_menu { background: transparent !important; }
.account_box .left_box .account_menu .account_menu_item { color: var(--ex-muted) !important; border-radius: 8px; }
.account_box .left_box .account_menu .account_menu_item:hover { color: var(--ex-text) !important; background: rgba(255,255,255,0.04); }
.account_box .left_box .account_menu .account_menu_item.active {
    background: var(--ex-yellow) !important;
    color: #0b0e11 !important;
    font-weight: 700;
}
.account_box .asset_total { background: var(--ex-card-2) !important; color: var(--ex-text) !important; border-bottom: 1px solid var(--ex-line) !important; }
.account_box .right_box .asset_list td,
.account_box .right_box table td { color: var(--ex-muted) !important; border-bottom: 1px solid var(--ex-line) !important; }
.account_box .right_box .asset_list .title_line { background: var(--ex-card-2) !important; }
.account_box .right_box .asset_list .item_line:hover { background: rgba(252, 213, 53, 0.06) !important; }
.account_box .right_box .asset_list .action_td .action_btn { color: var(--ex-yellow) !important; }
.account_box .right_box .asset_list .action_td .action_btn.off { color: var(--ex-muted) !important; }

.register_box {
    background: var(--ex-card) !important;
    border: 1px solid var(--ex-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.register_box .box_title { color: #fff !important; font-weight: 800 !important; }
.register_box .register_type_tab { border-bottom-color: var(--ex-line) !important; }
.register_box .register_type_tab .tab_item.active { border-bottom-color: var(--ex-yellow) !important; color: var(--ex-yellow) !important; }
.input_ele_box .input_ele,
.phone_area_num {
    background: #0b0e11 !important;
    border-color: var(--ex-line) !important;
    color: var(--ex-text) !important;
}
.input_ele_box .input_ele:focus { border-color: var(--ex-yellow) !important; caret-color: var(--ex-yellow) !important; }
.send_btn,
.register_button {
    background: var(--ex-yellow) !important;
    color: #0b0e11 !important;
    font-weight: 700 !important;
}
.send_btn:hover,
.register_button:hover { background: var(--ex-yellow-hover) !important; }
.send_btn.off,
.register_button.off { background: #474d57 !important; color: #b7bdc6 !important; }

/* Exchange / futures panels */
.exchange_box .exchange_left_box .exchange_market_box,
.exchange_box .exchange_center_box .exchange_kline_box,
.exchange_box .exchange_center_box .exchange_trade_box,
.exchange_bottom_box,
.exchange_box .exchange_right_box .exchange_deal_box,
.exchange_box .exchange_right_box .exchange_price_box {
    background: var(--ex-card) !important;
    border: 1px solid var(--ex-line);
    border-radius: 8px;
}
.exchange_box .exchange_left_box .exchange_market_box .box_title,
.exchange_box .exchange_center_box .exchange_kline_box .market_info_bar,
.exchange_box .exchange_center_box .exchange_trade_box .trade_type_list {
    background: var(--ex-card-2) !important;
}
.exchange_box .exchange_left_box .exchange_market_box .box_title .money_list .money_item.active {
    background: var(--ex-yellow) !important;
    color: #0b0e11 !important;
    border-color: var(--ex-yellow) !important;
    font-weight: 700;
}
.exchange_box .exchange_center_box .exchange_trade_box .trade_type_list .trade_item.active {
    color: var(--ex-yellow) !important;
    border-bottom-color: var(--ex-yellow) !important;
}
.exchange_box .exchange_left_box .exchange_market_box .box_content .market_list .market_item.active,
.exchange_box .exchange_left_box .exchange_market_box .box_content .market_list .market_item:hover {
    background: rgba(252, 213, 53, 0.08) !important;
}
.exchange_box .exchange_left_box .exchange_market_box .box_content .market_list .market_item.active .coin_symbol {
    color: var(--ex-yellow) !important;
}
.price_up, .buy { color: var(--ex-green) !important; }
.price_down, .sell { color: var(--ex-red) !important; }
.ask_box .trade_button { background: var(--ex-green) !important; }
.bid_box .trade_button { background: var(--ex-red) !important; }

.article_box .page_title,
.article_box .right_box {
    background: var(--ex-card) !important;
    border: 1px solid var(--ex-line);
    border-radius: 12px;
    color: var(--ex-text) !important;
}
.article_box .right_box .article_list_box .article_link_item {
    border-bottom-color: var(--ex-line) !important;
    color: var(--ex-text) !important;
}
.article_box .right_box .article_list_box .article_link_item:hover { color: var(--ex-yellow) !important; }

}