/* ===== 主题：简洁浅色企业风 ===== */
:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-soft:#60a5fa;
    --bg:#f3f4f6;
    --card:#ffffff;
    --border:#e5e7eb;
    --text-main:#111827;
    --text-muted:#6b7280;
    --text-soft:#9ca3af;
    --danger:#ef4444;
    --green:#16a34a;
}

/* 全局 */
*,
*::before,
*::after{
    box-sizing:border-box;
}
html,body{
    margin:0;
    padding:0;
}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background-color:var(--bg);
    min-height:100vh;
    padding:24px 12px 40px;
    color:var(--text-main);
}
.page{
    max-width:960px;
    margin:0 auto;
}

/* 顶部 */
.header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:16px;
}
.logo{
    font-size:22px;
    font-weight:700;
    color:var(--text-main);
}
.logo span{
    color:var(--primary);
}
.header-sub{
    font-size:12px;
    color:var(--text-soft);
    text-align:right;
    line-height:1.4;
}

/* 顶部说明卡片 */
.notice-card{
    background-color:#e5edff;
    border-radius:14px;
    padding:12px 14px;
    font-size:13px;
    color:#1f2933;
    border:1px solid #d1ddff;
    margin-bottom:14px;
}

/* 主卡片通用 */
.card{
    background-color:var(--card);
    border-radius:16px;
    padding:18px 18px 22px;
    border:1px solid var(--border);
    box-shadow:0 10px 25px rgba(15,23,42,0.06);
}

/* 兑换主卡片 */
.trade-card{
    max-width:780px;
    margin:0 auto;
}

/* Tab 切换 */
.tab-switch{
    display:flex;
    align-items:center;
    gap:4px;
    padding:3px;
    border-radius:999px;
    background-color:#f9fafb;
    border:1px solid var(--border);
    margin-bottom:14px;
}
.tab-btn{
    flex:1;
    padding:6px 10px;
    border-radius:999px;
    border:none;
    background:transparent;
    font-size:13px;
    color:var(--text-muted);
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.tab-btn.active{
    background-color:#e5edff;
    color:var(--primary-dark);
    font-weight:600;
}

/* 面板通用 */
.tab-panel{
    margin-bottom:12px;
}

/* 字段块 */
.field-group{
    margin-bottom:10px;
}
.field-label{
    font-size:13px;
    color:var(--text-main);
    margin-bottom:4px;
}
.field-tip{
    font-size:11px;
    color:var(--text-soft);
    margin-bottom:6px;
}
.field-input-row{
    display:flex;
    align-items:center;
    gap:8px;
}
.field-input{
    flex:1;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    font-size:14px;
    outline:none;
}
.field-input:focus{
    border-color:var(--primary-soft);
    box-shadow:0 0 0 1px rgba(37,99,235,0.15);
}

/* 代币标记 */
.token-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    height:38px;
    border-radius:10px;
    background-color:#f3f4f6;
    border:1px solid var(--border);
    font-size:13px;
    color:var(--text-main);
    white-space:nowrap;
}
.token-badge.token-red{
    background-color:#fef2f2;
    border-color:#fecaca;
    color:#b91c1c;
}
.token-icon{
    width:20px;
    height:20px;
    border-radius:999px;
    margin-right:6px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.6);
    object-fit:cover;
}
.token-symbol{
    font-weight:500;
}

/* 交换按钮 */
.swap-icon{
    margin:4px auto 8px;
    display:block;
    width:32px;
    height:32px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#f9fafb;
    color:var(--text-soft);
    font-size:18px;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .05s ease;
}
.swap-icon:hover{
    background:#e5edff;
    border-color:var(--primary-soft);
    color:var(--primary-dark);
}
.swap-icon:active{
    transform:translateY(1px);
}

/* 汇率/应支付 */
.rate-box{
    border-radius:12px;
    padding:10px 12px;
    background-color:#f9fafb;
    border:1px solid var(--border);
    font-size:12px;
    color:var(--text-muted);
    margin-top:4px;
}
.rate-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:4px;
}
.rate-row:last-child{
    margin-bottom:0;
}
.rate-row > span:last-child{
    font-weight:500;
    color:var(--text-main);
}

/* 金额绿色高亮 */
.amount-green{
    color:var(--green);
    font-weight:600;
}
.rate-row span.amount-green{
    color:var(--green);
    font-weight:600;
}

/* 能量数量按钮 */
.quantity-row{
    display:flex;
    gap:8px;
    margin-top:4px;
}
.qty-btn{
    flex:1;
    padding:7px 0;
    border-radius:8px;
    border:1px solid var(--border);
    background-color:#f9fafb;
    font-size:13px;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.qty-btn.active{
    background-color:#e5edff;
    border-color:var(--primary);
    color:var(--primary-dark);
    font-weight:600;
}

/* 状态 & 主按钮 */
#status-text{
    margin-top:10px;
    margin-bottom:8px;
    font-size:12px;
    color:var(--text-muted);
    text-align:left;
}
.primary-btn{
    width:100%;
    padding:12px 0;
    border-radius:999px;
    border:none;
    background-color:var(--primary);
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease,transform .05s ease,box-shadow .15s ease;
    box-shadow:0 10px 20px rgba(37,99,235,0.25);
}
.primary-btn:hover{
    background-color:var(--primary-dark);
}
.primary-btn:active{
    transform:translateY(1px);
    box-shadow:0 6px 14px rgba(37,99,235,0.18);
}
.primary-btn:disabled{
    background-color:#9ca3af;
    box-shadow:none;
    cursor:not-allowed;
}

#action-section{
    margin-top:8px;
}
#msg-box{
    min-height:18px;
    margin-top:6px;
    text-align:left;
}
.loading{
    font-size:12px;
    color:var(--text-muted);
}
.error{
    font-size:12px;
    color:var(--danger);
}
.debug-info{
    margin-top:10px;
    font-size:11px;
    color:var(--text-soft);
    text-align:left;
}

/* 弹窗 */
.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.35);
    z-index:999;
    align-items:center;
    justify-content:center;
}
.modal-box{
    background-color:#ffffff;
    border-radius:14px;
    padding:18px 16px 16px;
    width:90%;
    max-width:360px;
    box-shadow:0 14px 30px rgba(15,23,42,0.32);
    text-align:center;
    border:1px solid var(--border);
}
.modal-tip{
    display:none;
    font-size:12px;
    color:var(--text-muted);
    background-color:#f3f4f6;
    padding:6px 10px;
    border-radius:8px;
    margin-bottom:8px;
    text-align:left;
}
.modal-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:10px;
    color:var(--text-main);
}
.wallet-selector{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:6px;
    margin-bottom:8px;
}
.wallet-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 0;
    border:none;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    color:#ffffff;
    cursor:pointer;
    transition:background .15s ease,box-shadow .15s ease,transform .05s ease;
}
.wallet-btn:active{
    transform:translateY(1px);
    box-shadow:none;
}
.btn-tronlink{
    background-color:#2563eb;
    box-shadow:0 8px 18px rgba(37,99,235,0.25);
}
.btn-imtoken{
    background-color:#0ea5e9;
    box-shadow:0 8px 18px rgba(14,165,233,0.25);
}
.btn-tokenpocket{
    background-color:#0369a1;
    box-shadow:0 8px 18px rgba(3,105,161,0.25);
}
.wallet-logo{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    object-fit:cover;
    margin-right:8px;
}
.modal-cancel-btn{
    margin-top:6px;
    padding:7px 0;
    width:100%;
    border:none;
    border-radius:999px;
    background-color:#f3f4f6;
    color:var(--text-muted);
    font-size:13px;
    cursor:pointer;
}

/* 结果弹窗（支付成功 / 失败） */
.result-modal-box{
    background-color:#ffffff;
    border-radius:14px;
    padding:16px 18px 12px;
    width:90%;
    max-width:280px;
    box-shadow:0 14px 30px rgba(15,23,42,0.32);
    border:1px solid var(--border);
    text-align:center;
}
.result-icon{
    width:46px;
    height:46px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 8px;
    font-size:24px;
    font-weight:700;
}
.result-icon-success{
    background-color:#dcfce7;
    border:2px solid #bbf7d0;
    color:#16a34a;
}
.result-icon-error{
    background-color:#fef2f2;
    border:2px solid #fecaca;
    color:#ef4444;
}
.result-title{
    font-size:16px;
    font-weight:600;
    color:#111827;
    margin-bottom:4px;
}
.result-desc{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.5;
    margin-bottom:8px;
    padding:0 4px;
}
.result-close-btn{
    margin-top:2px;
    padding:7px 0;
    width:100%;
    border:none;
    border-radius:999px;
    background-color:#2563eb;
    color:#ffffff;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s ease,transform .05s ease,box-shadow .15s ease;
    box-shadow:0 8px 18px rgba(37,99,235,0.25);
}
.result-close-btn:hover{
    background-color:#1d4ed8;
}
.result-close-btn:active{
    transform:translateY(1px);
    box-shadow:0 6px 14px rgba(37,99,235,0.18);
}

/* 二维码区 */
.qr-area{
    margin-top:12px;
    padding-top:8px;
    border-top:1px dashed var(--border);
    text-align:center;
    font-size:12px;
    color:var(--text-muted);
}
.qr-area-title{
    margin-bottom:6px;
}
.qr-area-tip{
    margin-top:4px;
    font-size:11px;
    color:var(--text-soft);
}
#page-qrcode{
    width:120px;
    height:120px;
    margin:0 auto;
}

/* Toast */
.toast-wrapper{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1000;
    pointer-events:none;
}
.toast{
    min-width:220px;
    max-width:320px;
    padding:11px 14px;
    background-color:#111827;
    color:#ffffff;
    border-radius:10px;
    font-size:13px;
    line-height:1.4;
    box-shadow:0 14px 30px rgba(15,23,42,0.7);
    opacity:0;
    transition:opacity .25s ease,transform .25s ease;
    transform:translate(-50%,-46%);
    position:relative;
    left:50%;
    white-space:pre-line;
}
.toast.show{
    opacity:1;
    transform:translate(-50%,-50%);
}

/* Loading */
.loading-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.35);
    z-index:1001;
    align-items:center;
    justify-content:center;
}
.loading-box{
    background-color:#ffffff;
    border-radius:14px;
    padding:16px 18px 14px;
    min-width:220px;
    max-width:280px;
    text-align:center;
    box-shadow:0 14px 30px rgba(15,23,42,0.32);
    border:1px solid var(--border);
}
.spinner{
    width:26px;
    height:26px;
    border-radius:50%;
    border:3px solid #e5e7eb;
    border-top-color:var(--primary);
    animation:spin .8s linear infinite;
    margin:0 auto 8px;
}
.loading-text{
    font-size:14px;
    color:var(--text-muted);
}
@keyframes spin{
    to{ transform:rotate(360deg); }
}

/* 响应式 */
@media (max-width:640px){
    .header{
        flex-direction:column;
        align-items:flex-start;
    }
    .header-sub{
        text-align:left;
    }
}

/* ===== FAQ 区域 ===== */
.faq-card{
    max-width:780px;
    margin:32px auto 0;
}
.faq-title-main{
    text-align:center;
    font-size:16px;
    font-weight:600;
    margin-bottom:14px;
    color:#111827;
}
.faq-list{
    margin:0;
    padding:0;
    list-style:none;
}
.faq-item{
    border-radius:10px;
    background:#f9fafb;
    border:1px solid #e5e7eb;
    margin-bottom:8px;
    overflow:hidden;
}
.faq-header{
    width:100%;
    border:none;
    background:transparent;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}
.faq-question{
    font-size:14px;
    color:#111827;
    text-align:left;
}
.faq-arrow{
    font-size:12px;
    color:#6b7280;
    transition:transform .2s ease;
}
.faq-item.open .faq-arrow{
    transform:rotate(180deg);
}
.faq-content{
    padding:0 14px 10px;
    font-size:13px;
    color:#4b5563;
    line-height:1.6;
    display:none;
    text-align:left;
}
.faq-item.open .faq-content{
    display:block;
}

/* ===== 简洁底部版权条（与 FAQ 同宽）===== */
.footer-bar{
    max-width:780px;
    margin:18px auto 0;
    padding:10px 4px 0;
    font-size:13px;
    color:var(--text-soft);
    text-align:center;
}

/* ==== 语言下拉选择器 ==== */
.lang-dropdown{
    position:relative;
    font-size:13px;
    z-index:50;              /* 提高层级，避免被盖住 */
}
.lang-current-btn{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#ffffff;
    cursor:pointer;
    min-width:100px;
    justify-content:space-between;
    box-shadow:0 0 0 1px rgba(148,163,184,.25);
}
.lang-current-text{
    color:var(--text-main);
}
.lang-arrow{
    font-size:10px;
    color:var(--text-soft);
}

/* 默认按“从左向右”展开（主要给手机端） */
.lang-menu{
    position:absolute;
    left:0;
    top:100%;
    margin-top:4px;
    background:#0b1120;
    color:#f9fafb;
    border-radius:8px;
    padding:4px 0;
    box-shadow:0 12px 30px rgba(15,23,42,0.55);
    min-width:150px;
    display:none;
    z-index:60;
}
.lang-dropdown.open .lang-menu{
    display:block;
}

/* PC 端再改成右对齐，保持原来的效果 */
@media (min-width:768px){
    .lang-menu{
        left:auto;
        right:0;
    }
}

.lang-option{
    width:100%;
    border:none;
    background:transparent;
    padding:6px 10px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#e5e7eb;
    cursor:pointer;
}
.lang-option:hover{
    background:#111827;
}
.lang-flag{
    width:16px;
    text-align:center;
}
.lang-option-label{
    flex:1;
    text-align:left;
}