/* 顶部导航 Logo 新增样式 */
.logo-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    background:linear-gradient(135deg,#163868,#0b6cb9);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#40ddff;
    box-shadow:0 0 18px rgba(0,180,255,.25);
}
.logo-icon svg{
    width:26px;
    height:26px;
    filter:drop-shadow(0 0 6px rgba(64,221,255,.45));
}
.logo-icon img{
    width:26px;
    height:26px;
    object-fit:contain;
    filter:sepia(1) saturate(1.2) hue-rotate(170deg) brightness(1.1) contrast(1.1);
}
/* Logo 文字渐变科技蓝 */
.logo span{
    font-size:28px;
    font-weight:bold;
    background:linear-gradient(90deg,#ffffff,#42c8ff);
    -webkit-background-clip:text;
    color:transparent;
}
/* 页脚 Logo */
.footer-logo{
    width:70px;
    height:70px;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#0f274d,#051022);
    border:1px solid rgba(64,221,255,.3);
    box-shadow:0 0 22px rgba(0,170,255,0.18);
    color:#40ddff;
    font-size:35px;
}
.footer-logo svg{
    width:42px;
    height:42px;
    filter:drop-shadow(0 0 8px rgba(64,221,255,.45));
}
.footer-logo img{
    width:42px;
    height:42px;
    object-fit:contain;
    filter:sepia(1) saturate(1.2) hue-rotate(170deg) brightness(1.1) contrast(1.1);
}
/* 页脚品牌文字统一科技蓝 */
.footer-brand h3{
    color:#40ddff;
    font-size:30px;
}
.footer-brand p{
    color:#8fa7c6;
    font-size:13px;
    margin-top:5px;
}

/* 全局重置 */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Microsoft YaHei",Arial,sans-serif;
}
body{
background:#020713;
color:white;
overflow-x:hidden;
padding:0;
}
a{
color:#b6c8df;
text-decoration:none;
}
button{
cursor:pointer;
}


.nav-actions button:first-of-type{

background:transparent;

border:1px solid rgba(64,221,255,.3);

color:#40ddff;

}


.gold-btn{

background:
linear-gradient(135deg,#e6b340,#ffd050);

color:#020713;

font-weight:bold;

}
/* ========== 页面基础容器+横幅 ========== */
.page-container{
padding:0 40px 80px;
max-width:1600px;
margin:0 auto;
}
.page-banner{
text-align:center;
padding:60px 20px;
margin-bottom:60px;
background:linear-gradient(145deg,rgba(15,35,70,0.4),rgba(6,18,40,0.5));
border-radius:20px;
border:1px solid rgba(64,221,255,0.15);
}
.page-banner h2{
font-size:42px;
margin-bottom:8px;
}
.en-sub{
color:#40ddff;
font-size:16px;
letter-spacing:2px;
margin-bottom:16px;
}
.page-banner h3{
font-size:24px;
color:#d0e3f8;
margin-bottom:20px;
font-weight:normal;
}
.banner-desc{
max-width:900px;
margin:0 auto;
color:#9db2cf;
font-size:15px;
line-height:1.8;
}

/* ========== 全局网格布局 ========== */
.two-col-grid {
display: grid;
grid-template-columns: 62% 36%;
gap: 26px;
margin-bottom: 70px;
}
.three-col-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
margin-bottom: 70px;
}
.block-card {
background: linear-gradient(145deg,rgba(15,35,70,0.65),rgba(6,18,40,0.7));
border:1px solid rgba(64,221,255,0.22);
border-radius:18px;
padding:32px 28px;
transition:0.3s;
}
.col-box {
background: linear-gradient(145deg,rgba(15,35,70,0.65),rgba(6,18,40,0.7));
border:1px solid rgba(64,221,255,0.22);
border-radius:18px;
padding:28px 24px;
}
.block-title {
font-size:24px;
color:#fff;
margin-bottom:24px;
border-bottom:1px solid rgba(64,221,255,0.12);
padding-bottom:12px;
}

/* ========== 授权页面专属样式 ========== */
.step-flow {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 24px;
flex-wrap: wrap;
}
.step-item {
flex: 1;
min-width: 160px;
padding: 20px 12px;
background: rgba(10,24,48,0.6);
border: 1px solid rgba(64,221,255,0.18);
border-radius: 12px;
text-align: center;
}
.step-item.success {
border-color: rgba(0,220,120,0.4);
background: rgba(0,80,40,0.2);
}
.step-item.error {
border-color: rgba(255,80,80,0.4);
background: rgba(80,10,10,0.2);
}
.step-num {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(64,221,255,0.15);
border:1px solid #40ddff;
color:#40ddff;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 12px;
font-weight:bold;
}
.step-item.success .step-num {
background: rgba(0,220,120,0.15);
border-color:#00dc78;
color:#00dc78;
}
.step-item.error .step-num {
background: rgba(255,80,80,0.15);
border-color:#ff5050;
color:#ff5050;
}
.step-text h4 {
color:#fff;
font-size:15px;
margin-bottom:6px;
}
.step-text p {
color:#9db2cf;
font-size:12px;
line-height:1.5;
}
.step-line {
margin-top:40px;
color:#40ddff;
font-weight:bold;
font-size:20px;
}
.rate-big {
font-size:42px;
font-weight:bold;
color:#fff;
margin:10px 0 16px;
}
.rate-big span {
color:#40ddff;
}
.rate-list p {
color:#b6c8df;
font-size:14px;
margin:8px 0;
}
.warm-tip {
margin-top:20px;
padding:10px;
border:1px dashed rgba(64,221,255,0.2);
border-radius:8px;
color:#9db2cf;
font-size:12px;
}
.chart-box {
margin:24px 0;
padding:16px;
background:rgba(8,20,38,0.5);
border-radius:10px;
}
.chart-tip {
color:#b6c8df;
font-size:13px;
margin-bottom:12px;
}
.line-chart {
display:flex;
align-items:flex-end;
gap:8px;
height:120px;
border-left:1px solid rgba(64,221,255,0.15);
border-bottom:1px solid rgba(64,221,255,0.15);
padding-left:6px;
padding-bottom:6px;
}
.chart-bar {
width:22px;
background:linear-gradient(to top,#0b6cb9,#40ddff);
border-radius:4px 4px 0 0;
}
.chart-label {
display:flex;
justify-content:space-between;
margin-top:8px;
}
.chart-label span {
color:#8fa7c6;
font-size:11px;
}
.rule-list li {
display:flex;
gap:10px;
color:#b6c8df;
font-size:13px;
line-height:1.7;
margin:12px 0;
padding-bottom:10px;
border-bottom:1px dashed rgba(64,221,255,0.1);
list-style:none;
}
.mini-chart {
margin-top:20px;
padding:14px;
background:rgba(8,20,38,0.5);
border-radius:10px;
}
.mini-chart p {
color:#b6c8df;
font-size:13px;
margin-bottom:10px;
}
.pie-wrap {
display:flex;
height:24px;
border-radius:12px;
overflow:hidden;
}
.pie-item {
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
color:#fff;
}
.open-step li {
color:#b6c8df;
font-size:13px;
line-height:1.7;
margin:16px 0;
padding-left:6px;
}
.open-step b {
color:#40ddff;
font-size:14px;
display:block;
margin-bottom:4px;
}
.faq-item {
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px dashed rgba(64,221,255,0.1);
}
.q {
color:#fff;
font-size:14px;
margin-bottom:4px;
}
.a {
color:#9db2cf;
font-size:12px;
line-height:1.5;
}
.action-card {
display:flex;
flex-direction:column;
justify-content:center;
gap:16px;
}
.block-btn {
width:160px;
padding:12px 0;
border-radius:8px;
font-size:15px;
font-weight:bold;
border:none;
cursor:pointer;
}
.gold-btn.block-btn {
background:linear-gradient(135deg,#e6b340,#ffd050);
color:#020713;
}
.blue-btn.block-btn {
background:linear-gradient(135deg,#163868,#0b6cb9);
color:#fff;
border:1px solid #40ddff;
}
.renew-card ul li {
color:#9db2cf;
font-size:12px;
line-height:1.6;
margin:8px 0;
list-style:none;
}
.safe-wrap {
margin-top:60px;
}
.safe-wrap h3 {
text-align:center;
color:#fff;
font-size:26px;
margin-bottom:32px;
}
.safe-list {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}
.safe-item {
padding:20px 12px;
background:rgba(10,24,48,0.55);
border:1px solid rgba(64,221,255,0.18);
border-radius:12px;
text-align:center;
}
.safe-item h5 {
color:#40ddff;
font-size:16px;
margin-bottom:10px;
}
.safe-item p {
color:#9db2cf;
font-size:12px;
line-height:1.5;
}

/* ===== footer补充，不影响其它 ===== */

.footer-info{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:60px 80px;
}


.footer-brand{
    display:flex;
    align-items:center;
    gap:20px;
}


.footer-brand h2{
    color:#40ddff;
    font-size:30px;
}


.footer-brand-text p{
    color:#8fa7c6;
    font-size:13px;
    margin-top:5px;
}


.footer-column{
    display:flex;
    flex-direction:column;
    gap:14px;
}


.footer-column h3{
    color:#40ddff;
}


.footer-qrcode-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
}


.footer-qr{
    width:120px;
    height:120px;
    background:#fff;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
}
.nav-actions .gold-btn{

font-weight:normal!important;

}