@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Coda&family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* ─── Brand Colour Tokens ─────────────────────────────────────────────── */
:root {
    --brand:          #00C49A;
    --brand-hover:    #00A882;
    --brand-active:   #008E6E;
    --brand-dim:      rgba(0,196,154,.55);
    --brand-glass:    rgba(0,196,154,.12);
    --brand-border:   rgba(0,196,154,.25);
    --surface-0:      #0e1015;
    --surface-1:      #13151c;
    --surface-2:      #181b22;
    --text-primary:   #e8eaf0;
    --text-secondary: #aeb9d8;
    --text-muted:     #7a8799;
    --color-down:     #ef5656;
    --radius-sm:      8px;
    --radius-lg:      16px;
    --shadow-card:    0 4px 24px rgba(0,0,0,.45);
    --font-sans:      'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-num:       'Coda', var(--font-sans);
}

/*basic*/
*{ margin:0px; padding:0px; border:none; font-family: var(--font-sans); font-size:14px; text-decoration:none; list-style:none; outline:none; -webkit-text-size-adjust:none; border-radius:0; background:none; word-wrap: break-word; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; -khtml-user-select:none; user-select:none;}
a, button, .nav_item, .price_bar_item, .tab_item, .info_item, .global_stat_card, .btn_trade, .btn_hero_primary, .btn_hero_outline, .btn_download, .btn_nav_register, .btn_nav_login, tr { transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }
html,body{ width:100%; font-size:14px; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img,object,video{ max-width:100%; height:auto;}
article, aside, details,figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
::-webkit-scrollbar{ background-color:rgba(63,66,84,.3);border-radius:3px;height:6px;width:6px }
::-webkit-scrollbar-thumb{ background-color:rgba(0,196,154,.35);border-radius:3px }
html,body{ background-color: #0e1015; }
a{ color: var(--text-secondary); }
.clear{ clear:both; }

/* header styles live inline in front/header.php */

/* ─── Premium global button / primary element overrides ──────────────── */
.btn-brand,
.register_button,
.send_btn {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
    box-shadow: 0 4px 15px rgba(0,196,154,.25);
    letter-spacing: .03em;
}
.btn-brand:hover,
.register_button:hover,
.send_btn:hover {
    background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand-active) 100%);
    box-shadow: 0 4px 20px rgba(0,196,154,.4);
}

/* ─── Layui overrides ─────────────────────────────────────────────────── */
.layui-layer-btn .layui-layer-btn0{ background-color: var(--brand) !important; border-color: var(--brand) !important; }
.layui-layer-btn .layui-layer-btn0:hover{ background-color: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }

/* ─── Global brand colour overrides (all pages) ──────────────────────── */

/* Form inputs — focus ring and caret */
.input_ele:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-glass) !important; }
.input_ele:focus + label { color: var(--brand) !important; top: 8px !important; }
input[class*="input_ele"] { caret-color: var(--brand) !important; background: #0f1117 !important; border-color: rgba(255,255,255,.12) !important; border-radius: 8px !important; }
.input_ele { caret-color: var(--brand) !important; }
.trade_input_ele { caret-color: var(--brand) !important; }
.trade_input_ele:focus { border-color: var(--brand) !important; }

/* Inline text/copy buttons (withdraw/recharge copy address) */
.text_bar_box .text_btn { background: var(--brand) !important; }
.text_bar_box .text_btn:hover { background: var(--brand-hover) !important; }

/* Register/login/forgot card style */
.register_box { background: #181b22 !important; border: 1px solid rgba(0,196,154,.15) !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,.5) !important; }

/* Tab active underline inside forms */
.register_type_tab .tab_item.active { color: var(--brand) !important; border-bottom-color: var(--brand) !important; }

/* Buttons */
.send_btn,
.register_button {
    background: linear-gradient(135deg,#00C49A,#00A882) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0,196,154,.3) !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
    color: #fff !important;
}
.send_btn:hover, .register_button:hover { background: linear-gradient(135deg,#00A882,#008E6E) !important; box-shadow: 0 4px 20px rgba(0,196,154,.45) !important; }
.send_btn:active, .register_button:active { background: #008E6E !important; }
.send_btn.off, .register_button.off { background: rgba(0,196,154,.35) !important; box-shadow: none !important; }

/* Action buttons / text links */
.action_btn { color: var(--brand) !important; }
.action_btn:hover { color: var(--brand-hover) !important; }

/* Pagination */
.paging_box .page_item.active, .paging_box .page_item:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }

/* Dropdown list Layui hover/active */
.layui-unselect dl dd:hover { background: var(--brand-glass) !important; }
.layui-unselect dl dd.layui-this { background: var(--brand) !important; color: #000 !important; }

/* Account / asset layout */
.account_box .page_title { background: #13151c !important; letter-spacing: .03em; }
.account_box .right_box { background: #181b22 !important; border: 1px solid rgba(255,255,255,.05) !important; }

/* Table row hover brand tint */
.account_info_list .item_line:hover { background: var(--brand-glass) !important; }

/* Paging / article page */
.paging_item.active, .paging_item:hover { color: var(--brand) !important; }

/* ─── Price Skeleton Shimmer ─────────────────────────────────────────── */
@keyframes price-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.price-skel {
    display: inline-block;
    border-radius: 3px;
    height: .85em;
    width: 65px;
    vertical-align: middle;
    background: linear-gradient(90deg, #1a1d26 25%, #222530 50%, #1a1d26 75%);
    background-size: 400px 100%;
    animation: price-shimmer 1.4s ease-in-out infinite;
}

/* ─── Autofill fix ───────────────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0f1117 inset !important;
    -webkit-text-fill-color: #d5def2 !important;
    caret-color: var(--brand) !important;
    transition: background-color 99999s ease-in-out 0s;
}

/* ─── Desktop account sidebar pages — teal sync ─────────────────────── */
.account_box .page_title { background: #13151e !important; border-radius: 8px 8px 0 0 !important; letter-spacing: .03em; }
.account_box .right_box { background: #161a24 !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 0 0 12px 12px !important; }
.account_box .right_box .action_title { background: #13151e !important; color: #8a9ab5 !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; }

.account_box .right_box .action_box .field_line_item .input_ele_box .input_ele {
    border: rgba(255,255,255,.12) solid 1px !important;
    border-radius: 8px !important;
    caret-color: var(--brand) !important;
    background: #0f1117 !important;
}
.account_box .right_box .action_box .field_line_item .input_ele_box .input_ele:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glass) !important;
}
.account_box .right_box .action_box .field_line_item .input_ele_box .input_ele:focus + label { color: var(--brand) !important; }

.account_box .right_box .action_box .field_line_item .input_ele_box .text_bar_box .text_btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0,196,154,.25) !important;
}
.account_box .right_box .action_box .field_line_item .input_ele_box .text_bar_box .text_btn:hover {
    background: linear-gradient(135deg, var(--brand-hover), var(--brand-active)) !important;
}
.account_box .right_box .action_box .field_line_item .input_ele_box .text_bar_box .text_btn:active {
    background: var(--brand-active) !important;
}

.account_box .right_box .action_box .field_line_item .phone_area_num {
    border: rgba(255,255,255,.12) solid 1px !important;
    border-radius: 8px !important;
    background: #0f1117 !important;
}
.account_box .right_box .action_box .field_line_item .phone_area_num .layui-unselect {
    background: #0f1117 !important;
    border-radius: 8px !important;
}
.account_box .right_box .action_box .field_line_item .phone_area_num .layui-unselect dl {
    background: #181b22 !important;
    border-color: var(--brand-border) !important;
}
.account_box .right_box .action_box .field_line_item .phone_area_num .layui-unselect dl dd:hover {
    background: var(--brand-glass) !important;
}
.account_box .right_box .action_box .field_line_item .phone_area_num .layui-unselect dl dd.layui-this {
    background: var(--brand) !important;
    color: #000 !important;
}

.account_box .right_box .action_box .field_line_item .send_btn,
.account_box .right_box .action_box .field_line_item .register_button {
    background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0,196,154,.3) !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
}
.account_box .right_box .action_box .field_line_item .send_btn:hover,
.account_box .right_box .action_box .field_line_item .register_button:hover {
    background: linear-gradient(135deg, var(--brand-hover), var(--brand-active)) !important;
    box-shadow: 0 4px 20px rgba(0,196,154,.45) !important;
}
.account_box .right_box .action_box .field_line_item .send_btn:active,
.account_box .right_box .action_box .field_line_item .register_button:active {
    background: var(--brand-active) !important;
}
.account_box .right_box .action_box .field_line_item .send_btn.off,
.account_box .right_box .action_box .field_line_item .register_button.off {
    background: var(--brand-dim) !important;
    box-shadow: none !important;
}

.account_box .right_box .asset_list .item_line:hover,
.account_box .right_box .account_info_list .item_line:hover {
    background: var(--brand-glass) !important;
}
.account_box .right_box .asset_list .action_td .action_btn,
.account_box .right_box .account_info_list .action_td .action_btn {
    color: var(--brand) !important;
}
.account_box .right_box .asset_list .action_td .action_btn:hover,
.account_box .right_box .account_info_list .action_td .action_btn:hover {
    color: var(--brand-hover) !important;
}

.account_box .get_wallet {
    background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0,196,154,.3) !important;
    font-weight: 600 !important;
}
.account_box .get_wallet:hover {
    background: linear-gradient(135deg, var(--brand-hover), var(--brand-active)) !important;
}
.account_box .get_wallet:active { background: var(--brand-active) !important; }
.account_box .get_wallet.off {
    background: var(--brand-dim) !important;
    cursor: not-allowed !important;
}

.account_box .wallet_tab_box .wallet_tab_item_box .wallet_tab_item {
    color: var(--brand) !important;
    border: var(--brand-border) solid 1px !important;
    border-radius: 6px !important;
}
.account_box .wallet_tab_box .wallet_tab_item_box .wallet_tab_item:hover {
    color: var(--brand-hover) !important;
    border-color: var(--brand) !important;
}
.account_box .wallet_tab_box .wallet_tab_item_box .wallet_tab_item.active {
    color: #fff !important;
    border-color: var(--brand) !important;
    background: var(--brand) !important;
}

.movebox .move_body { border-color: var(--brand-border) !important; }
.movebox .move_body .move_from_box { border-bottom-color: var(--brand-border) !important; }
.movebox .move_body .move_to_box .move_all_btn {
    border-left-color: var(--brand-border) !important;
    color: var(--brand) !important;
}
.movebox .move_body .move_to_box .move_all_btn:hover { color: var(--brand-hover) !important; }
.movebox .move_body .move_exchange_btn { border-left-color: var(--brand-border) !important; }
.movebox .move_action_btn {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    border-radius: 6px !important;
}
.movebox .move_action_btn.move_submit {
    background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* CSS spinner — replaces layui-icon-loading on all btn_load elements */
@keyframes btn-spin { to { transform: rotate(360deg); } }
i.btn_load, i.trade_btn_load {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .8s linear infinite;
    vertical-align: middle;
    font-size: 0;
}