html[theme="white"]:root {
    //白色主题 - Crypto.com 风格
    --mainBgColor: #ffffff;
    --mainTextColor: #0B1426;
    --mainbgWhiteColor: #fff;
    --main_background: #ffffff;
    --main2_background: #f8f9fa;
    --main3_background: #F7F9F9;
    --text_color: #0B1426;
    --text_color1: #76808F;
    --text_color2: #0B1426;
    --text_color3: #76808F;
    --text_color4: #0B1426;
    --text_color5: #76808F;
    --text_color6: #76808F;
    --tab_background: #F6F8F9;
    --active_line: #92D1FF;
    --footer_background: #ffffff;
    --btn_main: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
    --color_main: #92D1FF;
    --btn_background: #474B62;
    --input_background: #F5F5F5;
    --cont_background1: #f5f5f5;
    --title_color: #B8BDC5;
    --line_color: #F5F5F5;
    --bg_dark: #ccc;
    --border_color: #F5F5F5;
    --divi_line: #F5F5F5;
    --bg_step: #868D9A;
    --bg_Bottom: #F5F5F5;
    --chat_bg: #474B62;
    --upload_bg: #969696;
    --grey_bg: #f5f5f5;
    --input_background1: #F5F5F5;
    --c2c_color: #333;
    --c2c_background: #fff;
    --c2c_background1: #f5f5f5;
    --c2c_tab_background: #f5f5f5;
    --c2c_tip_background: #fff;
    --selectSymbol_background: #f5f5f5;
    --options_background: #f5f5f5;
    --US_tab_background: #f5f5f5;
    --US_tabActice_background: #f5f5f5;
    --lable_color: #B6BDD4;
    --cont_background: #f6f6f6;
    --delivery_left_tab_background: #f6f6f6;
    --delivery_tab_background: #f5f5f5;
    --search_background: #F5F5F5;
    --pledgeLoan_background: #00E3FF;
    --financialBackground: #fff;
    --footer_bg: #FFFFFF;
    --footer_color: #4A4D51;
    --recommend_bg: #F6F8F9;
    --tab_normal_text: #666;
    --hot-item-bg: #F6F8F9;
    --second-bg: #F5F5F5;
    --dot-alp: rgba(0, 0, 0, .3);
    --btn-group: #FFFFFF;
    --popup-bg: #fff;
    --tab-second-bg: #f5f5f5;
    --filter: invert(1);
    --chat-border: #e2e2e2;
    --more-bg: #fff;
    --fina-border: #EAEDF2;
    --financialBut: #f5f5f5;
    --select-bg: #f1f1f1;
    --foot-border: #e9e9e9;
    --input-border: #e5e5e5;
    --c2c-tab-bg: #ffffff;
    --step-border: #dbdbdb;
    --step-bg: #f5f5f5;
    --news-bg-1: #f2f7ff;
    --news-bg-2: #fcfcfc;
    --footer-border: #ccc;
    --hot-bg-1: #ECF4FF;
    --hot-bg-2: #FFFFFF;
    --bz-bg: #fff;
    --jp-hot-bg-1: #fff;
    --jp-hot-bg-2: #E2ECFF;
    --hot-text-color1: #AEB2BE;
    --hot-text-color2: #747A8F;
    --lower-text-color: #797B85;
    --en-hot-bg-1: #E2ECFF;
    --en-hot-bg-2: #fff;
    --en-stock-bg: #F5F5F5;
    --down-bg: linear-gradient(180deg, #e7a2b5 0%, #fef2f2 100%);
    --up-bg: linear-gradient(180deg, #6cf9dd 0%, #e8fcf0 100%);
    --tab_active: #EAEDF2;
    --exchange-bg: #f5f5f5;
    --f10-text: #868D9A;
    --quotes-btn-bg: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
    --quotes-btn-text: #ffffff;
    --van-bg: #ffffff;
    --ipo_card_bg: #F5F8FC;
    --ipo_normal_text: #747A8F;
    --van-step-b: #ffffff;
    --van-step-s: #cdcdcd;
    --van-step-g: #ffffff;
    --transferInputBg: #f3f3f3;
    --transferFeeBg: #d7e8ff;
    --main-border: #e5e7eb;
    --danger: #F2495E;
    --inverse: #ffffff;
    --tips-color: #9397AA;
    --sec-border: #e5e7eb
}

html[theme="dark"]:root {
    //黑色主题 - Crypto.com 风格
    --mainBgColor: #0B1426;
    --mainTextColor: #ffffff;
    --mainbgWhiteColor: #fff;
    --main_background: #0B1426;
    --main2_background: #1A2332;
    --main3_background: #0B1426;
    --text_color: #ffffff;
    --text_color1: #76808F;
    --text_color2: #ffffff;
    --text_color3: #EAECEF;
    --text_color4: #ffffff;
    --text_color5: #76808F;
    --text_color6: #EAECEF;
    --tab_background: #1A2332;
    --active_line: #ffffff;
    --footer_background: #0B1426;
    --btn_main: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
    --color_main: #92D1FF;
    --btn_background: #474B62;
    --input_background: #27293B;
    --cont_background1: #27293B;
    --title_color: #B8BDC5;
    --line_color: #393E49;
    --bg_dark: #474B62;
    --border_color: #212C4E;
    --divi_line: #151726;
    --bg_step: #868D9A;
    --bg_Bottom: #313346;
    --chat_bg: #474B62;
    --upload_bg: #474B62;
    --grey_bg: #474B62;
    --input_background1: #131a2e;
    --c2c_color: #fff;
    --c2c_background: #131a2e;
    --c2c_background1: #27293B;
    --c2c_tab_background: #27293B;
    --c2c_tip_background: #131a2e;
    --selectSymbol_background: #131A2E;
    --options_background: #232C46;
    --US_tab_background: #112542;
    --US_tabActice_background: #112542;
    --lable_color: #B6BDD4;
    --cont_background: #f6f6f6;
    --delivery_left_tab_background: #1B2134;
    --delivery_tab_background: #2A324D;
    --search_background: #1B233B;
    --pledgeLoan_background: #00E3FF;
    --financialBackground: #1E2340;
    --footer_bg: #131A2E;
    --footer_color: #76808F;
    --recommend_bg: #1A2136;
    --tab_normal_text: #999;
    --hot-item-bg: #1B2134;
    --second-bg: #0D1224;
    --dot-alp: rgba(255, 255, 255, .3);
    --btn-group: #000;
    --popup-bg: #1f233d;
    --tab-second-bg: #1b2134;
    --filter: invert(0);
    --chat-border: #313346;
    --more-bg: #131A2E;
    --fina-border: #1E2340;
    --financialBut: #3D476C;
    --select-bg: #1C2946;
    --foot-border: #2B314A;
    --input-border: #131a2e;
    --c2c-tab-bg: #27293B;
    --step-border: #212C4E;
    --step-bg: #15284F;
    --news-bg-1: #1c253f;
    --news-bg-2: #12192c;
    --footer-border: #21273C;
    --hot-bg-1: #1B2134;
    --hot-bg-2: #1B2134;
    --bz-bg: #1B2134;
    --jp-hot-bg-1: #2E3650;
    --jp-hot-bg-2: #1B2134;
    --hot-text-color1: #747A8F;
    --hot-text-color2: #B6BDD4;
    --lower-text-color: #B8BDD1;
    --en-hot-bg-1: #2E3650;
    --en-hot-bg-2: #1B2134;
    --en-stock-bg: #0D1224;
    --down-bg: linear-gradient(180deg, #430E1D 0%, rgba(35, 35, 35, .8) 100%);
    --up-bg: linear-gradient(180deg, #18382d 0%, rgba(35, 35, 35, .8) 100%);
    --tab_active: #1F233D;
    --exchange-bg: #0D1323;
    --f10-text: #B6BDD4;
    --quotes-btn-bg: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
    --quotes-btn-text: #ffffff;
    --van-bg: #121a2e;
    --ipo_card_bg: #192137;
    --ipo_normal_text: #B7BDD1;
    --van-step-b: #202840;
    --van-step-s: #15284F;
    --van-step-g: #131A2E;
    --transferInputBg: #232C46;
    --transferFeeBg: #253439;
    --main-border: #14141C;
    --danger: #F2495E;
    --inverse: #1a2136;
    --tips-color: #9397AA;
    --sec-border: #383848
}

$mainBgColor: var(--mainBgColor);
$mainTextColor: var(--mainTextColor);
$mainbgWhiteColor: var(--mainbgWhiteColor);

$main_background: var(--main_background); //主题色
$main2_background: var(--main2_background); //主题浅色背景
$text_color: var(--text_color); //文字颜色
$text_color1: var(--text_color1); //文字浅色
$text_color2: var(--text_color2); // 白色文字
$text_color3: var(--text_color3); // 
$text_color4: var(--text_color4); //浅色标题背景文字颜色
$text_color5: var(--text_color5); // 
$text_color6: var(--text_color6); // 文字更浅色
$tab_background: var(--tab_background); //tab切换背景颜色
$active_line: var(--active_line); //tab选中样式颜色
$footer_background: var(--footer_background); // 底部颜色
$btn_main: var(--btn_main); //主题色按钮
$color_main: var(--color_main); //主题色文字
$btn_background: var(--btn_background); //按钮颜色
$input_background: var(--input_background); //input背景颜色
$cont_background1: var(--cont_background1); //title背景色
$title_color: var(--title_color);
$line_color: var(--line_color);
$bg_dark: var(--bg_dark);
$border_color: var(--border_color);
$divi_line: var(--divi_line); //分割线
$bg_step: var(--bg_step);
$bg_Bottom: var(--bg_Bottom);
$chat_bg: var(--chat_bg);
$upload_bg: var(--upload_bg);
$grey_bg: var(--grey_bg);
$input_background1: var(--input_background1); //质押借币input
$c2c_color: var(--c2c_color);
$c2c_background: var(--c2c_background);
$c2c_background1: var(--c2c_background1);
$c2c_tab_background: var(--c2c_tab_background);
$c2c_tip_background: var(--c2c_tip_background);
$selectSymbol_background: var(--selectSymbol_background); //自选与选择币种背景颜色
$options_background: var(--options_background); //外汇操作按钮
$US_tab_background: var(--US_tab_background);
$US_tabActice_background: var(--US_tabActice_background);
$lable_color: var(--lable_color);
$cont_background: var(--cont_background);
$delivery_left_tab_background: var(--delivery_left_tab_background);
$delivery_tab_background: var(--delivery_tab_background);
$search_background: var(--search_background);
$pledgeLoan_background: var(--pledgeLoan_background);
$financialBackground: var(--financialBackground); //理财背景
$financialBut: var(--financialBut); //取消按钮理财背景
$footer_bg: var(--footer_bg);
$recommend-bg: var(--recommend_bg);
$footer_color: var(--footer_color);
$tab_normal_text: var(--tab_normal_text);
$hot-item-bg: var(--hot-item-bg);
$second-bg: var(--second-bg);
$dot-alp: var(--dot-alp);
$btn-group: var(--btn-group);
$popup-bg: var(--popup-bg);
$tab-second-bg: var(--tab-second-bg);
$filter :var(--filter);
$chat-border: var(--chat-border);
$more-bg: var(--more-bg);
$fina-border: var(--fina-border);

$select-bg: var(--select-bg);
$foot-border: var(--foot-border);
$input-border: var(--input-border);
$c2c-tab-bg: var(--c2c-tab-bg);
$step-border: var(--step-border);
$step-bg: var(--step-bg);
$news-bg-1: var(--news-bg-1);
$news-bg-2: var(--news-bg-2);
$footer-border: var(--footer-border);
$hot-bg-1: var(--hot-bg-1);
$hot-bg-2: var(--hot-bg-2);
$bz-bg: var(--bz-bg);
$jp-hot-bg-1: var(--jp-hot-bg-1);
$jp-hot-bg-2: var(--jp-hot-bg-2);
$hot-text-color1: var(--hot-text-color1);
$hot-text-color2: var(--hot-text-color2);
$lower-text-color: var(--lower-text-color);
$down-bg: var(--down-bg);
$up-bg: var(--up-bg);
$tab_active: var(--tab_active);
$exchange-bg: var(--exchange-bg);
$f10-text: var(--f10-text);
$quotes-btn-bg: var(--quotes-btn-bg);
$quotes-btn-text: var(--quotes-btn-text);
$van-bg: var(--van-bg);
$ipo_card_bg: var(--ipo_card_bg);
$ipo_normal_text: var(--ipo_normal_text);
$van-step-b: var(--van-step-b);
$van-step-s: var(--van-step-s);
$van-step-g: var(--van-step-g);
$en-hot-bg-1: var(--en-hot-bg-1);
$en-hot-bg-2: var(--en-hot-bg-2);
$en-stock-bg: var(--en-stock-bg);



/* 颜色值 */
$white: #ffffff;
$black: #000000;
$dark-black: #22262F;
// $grey:#868C9A;
$grey: #E5E7ED;
$dark-grey: #868C9A;
$light-grey: #C8CAD2;
$border-grey: #E5E7ED;
$blue: #92D1FF;
$light-blue: #7BB8FF;
$red: #F43368;
$green: #06CDA5;
$purple: #9A4DFD;
$night: #131A2E;
$main-btn-color: #fff;

// 第三版
$c-blue: #1199FA;
$c-red: #DE5D56;

// 主题-蓝涨红跌
.blue-up-color {
    color: $c-blue  !important;
}

.red-down-color {
    color: $c-red  !important;
}

.blue-up-bg {
    background: $c-blue  !important;
}

.red-down-bg {
    background: $c-red  !important;
}

.mainBackground {
    background: $main_background;
}

.textColor {
    color: $text_color
}

.textColor1 {
    color: $text_color1
}

.textColor2 {
    color: $text_color2
}

.textColor3 {
    color: $text_color3
}

.textColor4 {
    color: $text_color4
}

.c2cColor {
    color: $c2c_color
}

.tabBackground {
    background: $tab_background;
}

.activeLine {
    background: $active_line;
}

.bgFooter {
    background: $footer_background;
}

.btnMain {
    background: $btn_main;
}

.colorMain {
    color: $color_main;
}

.borderMain {
    border: 1px solid $color_main;
}

.borderColor {
    border: 1px solid $border_color;
}

.btnBackground {
    background: $btn_background;
}

.inputBackground {
    background: $input_background;
}

.inputBackground1 {
    background: $input_background1;
}

.contBackground {
    background: $cont_background;
}

.contBackground1 {
    background: $cont_background1;
}

.titleColor {
    color: $title_color;
}

.border-b-color {
    border-bottom: 1px solid $line_color;
}

.border-t-color {
    border-top: 1px solid $line_color;
}

.bgDark {
    background: $bg_dark;
}

.diviLine {
    background: $divi_line;
}

.bgStep {
    background: $bg_step;
}

.bgBottom {
    background: $bg_Bottom;
}

.chatBg {
    background: $chat_bg;
}

.uploadBg {
    background: $upload_bg;
}

.greyBg {
    background: $grey_bg;
}

.c2cBackground {
    background: $c2c_background;
}

.c2cBackground1 {
    background: $c2c_background1;
}

.c2cTabBackground {
    background: $c2c_tab_background;
}

.c2cTabBg {
    background: $c2c-tab-bg;
}

.c2cTipBackground {
    background: $c2c_tip_background;
}

.main2_background {
    background: $main2_background;
}

.delivery_tab_background {
    background: $delivery_tab_background;
}

.delivery_left_tab_background {
    background: $delivery_left_tab_background;
}

.pledgeLoan_background {
    background: $pledgeLoan_background;
}

.text_color6 {
    color: $text_color6;
}

.red {
    color: $red;
}

.green {
    color: $green;
}

.financialBackground {
    background: $financialBackground;
}

.financialBut {
    background: $financialBut;
}

.popup-bg {
    background-color: $popup-bg  !important;
}

.color-white {
    color: $white  !important;
}

.fina-border {
    border: 1px solid $fina-border;
}


.w-half {
    width: 50%;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100%;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100%;
}

.h-1000 {
    height: 1000px;
}

/* background */
.bg-white {
    background: $white;
}

.bg-black {
    background: #131A2E;
}

.bg-night {
    background: #131A2E;
    color: #fff;
}

.bg-night1 {
    background: #000;
}

.bg-grey {
    background: $grey;
}

.bg-dark-grey {
    background: $dark-grey
}

;

.bg-light-grey {
    background: $light-grey;
}

.bg-red {
    background: $red;
}

.bg-green {
    background: $green;
}

.bg-blue {
    background: $blue;
}

.bg-dark-blue {
    background: #6C52E6;
}

.bg-light-blue {
    background: #7F81FD;
}

.bg-f5 {
    background: #F5F5F5
}

.bg-none {
    background: none;
}

.bg-grey-f3 {
    background: $grey;
}


/* color */
.text-white {
    color: $white;
}

.text-black {
    color: $black;
}

.text-dark-black {
    color: $dark-black;
}

.text-grey {
    color: $dark-grey;
}

.text-blue {
    color: $blue;
}

.text-light-blue {
    color: $light-blue;
}

.text-red {
    color: $red;
}

.text-green {
    color: $green;
}

.text-purple {
    color: $purple;
}

.text-night {
    color: $night;
}

/* border-color */
.border-white {
    border-color: $white;
}

.border-black {
    border-color: $black;
}

.border-grey {
    border-color: $grey;
}

.border-light-grey {
    border-color: $light-grey;
}

.border-red {
    border-color: $red;
}

.border-green {
    border-color: $green;
}

.border-blue {
    border-color: $blue;
}

.border-light-blue {
    border-color: $light-blue;
}

.border-solid {
    border-style: solid;
    border-color: $border-grey;
}

.border-b-grey {
    border-bottom: 1px solid $border-grey;
}

.border-r-grey {
    border-right: 1px solid $border-grey;
}

.border-t-grey {
    border-top: 1px solid $border-grey;
}

.border-solid-blue {
    border: 1px solid $blue;
}

.border-solid-grey {
    border: 1px solid $grey;
}

.border-solid-dark-grey {
    border: 1px solid $dark-grey;
}

.border-solid-light-grey {
    border: 1px solid $border-grey;
}

.border-b-dashed-black {
    border-bottom: 1px dashed #000;
}

// .border-b-grey { border-bottom: 1px solid #E5E7ED;}
// .border-r-grey { border-right: 1px solid #E5E7ED;}

// overwrite vant
.mining-pledge {
    .van-tabs__wrap {
        height: 145px !important;

        .van-tab {
            &:first-child {
                border-right: 1px solid $border-grey;
            }
        }
    }
}

:root {
    --theme-color: #92D1FF;
    --card-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
    --card-shadow-hover: 0 4px 20px rgba(146, 209, 255, 0.12);
    --gradient-primary: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
    --gradient-primary-hover: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
}