*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:#f5f9fe;
    color:#15355e;
    font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif
}
.topbar{
    height:68px;
    background:#fff;
    display:flex;
    align-items:center;
    padding:0 3.8%;
    gap:65px;
    border-bottom:1px solid #edf3f9;
    position:sticky;
    top:0;
    z-index:10
}
.brand{
    display:flex;
    align-items:center;
    min-width:180px
}
.brand img{
    width:142px;
    height:58px;
    object-fit:contain
}
.logo-fallback{
    font-size:22px;
    font-weight:800;
    color:#1269bb
}
.nav{
    height:100%;
    display:flex;
    align-items:center;
    gap:42px
}
.nav a{
    height:100%;
    display:flex;
    align-items:center;
    position:relative;
    color:#294c72;
    font-size:14px
}
.nav a.active,.nav a:hover{
    color:#0d73dc
}
.admin-link{
    margin-left:auto;
    border:1px solid #4b9af0;
    border-radius:22px;
    color:#1974d3;
    padding:9px 18px;
    font-size:13px;
    background:#fff
}
.hero{
    height:208px;
    background:linear-gradient(90deg,#eaf7ff,#d8efff 52%,#e9f7ff);
    overflow:hidden;
    position:relative
}
.hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 58%,#d8edf933),radial-gradient(circle at 75% 50%,#fff9,transparent 30%);
    pointer-events:none
}
.hero-inner{
    max-width:1180px;
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    position:relative;
    z-index:1
}
.hero-logo{
    width:190px
}
.hero-logo img{
    width:165px;
    max-height:85px;
    object-fit:contain
}
.hero-text h1{
    font-size:31px;
    margin:0 0 7px;
    color:#123b70;
    font-weight:800
}
.hero-text h2{
    font-size:22px;
    margin:0 0 17px;
    color:#1267b7;
    font-weight:500;
    letter-spacing:2px
}
.hero-text p{
    font-size:13px;
    color:#547292;
    margin:0
}
.hero-slogan{
    margin-left:auto;
    margin-right:95px;
    color:#126cc0;
    font-family:"KaiTi","STKaiti",serif;
    font-size:20px;
    line-height:1.5;
    transform:rotate(-6deg);
    position:relative
}
.hero-slogan span{
    display:block;
    width:100px;
    height:12px;
    border-bottom:2px solid #1473c9;
    border-radius:50%;
    transform:rotate(-4deg)
}
.application{
    max-width:1210px;
    margin:24px auto 35px;
    display:grid;
    grid-template-columns:225px 1fr 280px;
    gap:18px;
    align-items:stretch
}
.steps-card,.form-card,.join-card{
    background:#fff;
    border:1px solid #e2edf7;
    border-radius:10px;
    box-shadow:0 5px 20px #2675b80b
}
.steps-card{
    padding:13px 10px 20px;
    min-height:560px;
    display:flex;
    flex-direction:column
}
.steps-head{
    background:#f4f9ff;
    border-radius:9px;
    padding:13px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#126cc2
}
.steps-head strong{
    font-size:14px;
    display:block
}
.steps-head small{
    display:block;
    color:#7d9bb9;
    font-size:10px;
    margin-top:4px
}
.user-icon{
    font-size:25px
}
.steps{
    margin-top:8px
}
.step{
    display:block;
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    padding:10px 12px;
    color:#6c8cad;
    font-size:13px;
    border-radius:7px;
    cursor:pointer
}
.step span{
    display:inline-block;
    width:28px
}
.step.current{
    background:#e5f2ff;
    color:#0874dc;
    border-left:4px solid #167ce4;
    font-weight:700
}
.step.unlocked:hover{
    background:#f3f8fd
}
.steps-quote{
    margin-top:auto;
    padding:18px 10px 0;
    color:#92aac2;
    font-family:"KaiTi","STKaiti",serif;
    font-size:13px;
    line-height:2;
    position:relative
}
.steps-quote i{
    position:absolute;
    right:10px;
    bottom:4px;
    color:#8baed2;
    font-size:24px;
    transform:rotate(-25deg)
}
.form-card{
    padding:22px 24px;
    min-height:560px;
    display:flex;
    flex-direction:column
}
.section-title{
    border-bottom:1px solid #edf2f6;
    padding-bottom:14px;
    margin-bottom:20px
}
.section-title div{
    display:flex;
    align-items:center;
    gap:8px
}
.section-title .num{
    color:#1479dc;
    font-size:22px;
    font-weight:800
}
.section-title h2{
    font-size:20px;
    margin:0;
    color:#173e6b
}
.section-title p{
    font-size:12px;
    color:#86a0bb;
    margin:9px 0 0
}
.fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 28px
}
.field{
    min-width:0
}
.field.wide,.field.radio-field{
    grid-column:1/-1
}
.field label{
    font-size:13px;
    color:#214a78;
    font-weight:700
}
.field label b{
    color:#ed5961
}
.field input,.field textarea{
    width:100%;
    margin-top:8px;
    border:1px solid #cbddec;
    border-radius:6px;
    padding:12px 14px;
    background:#fff;
    color:#244b73;
    outline:0;
    font-size:13px;
    transition:.2s
}
.field input:focus,.field textarea:focus{
    border-color:#2685df;
    box-shadow:0 0 0 3px #2685df14
}
.field textarea{
    min-height:175px;
    resize:vertical;
    line-height:1.7
}
.radio-row{
    display:flex;
    gap:30px;
    margin-top:10px
}
.radio{
    display:flex;
    align-items:center;
    gap:8px;
    color:#365a80;
    font-size:13px
}
.radio input{
    width:17px;
    height:17px;
    margin:0;
    accent-color:#147be0
}
.form-actions{
    margin-top:auto;
    padding-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:10px
}
.primary-btn,.ghost-btn{
    border-radius:5px;
    padding:10px 23px;
    font-size:13px;
    cursor:pointer
}
.primary-btn{
    border:0;
    background:#147be0;
    color:#fff;
    box-shadow:0 5px 12px #147be033
}
.ghost-btn{
    border:1px solid #cbddec;
    background:#fff;
    color:#6686a5
}
.join-card{
    padding:25px 24px;
    background:linear-gradient(180deg,#eaf6ff,#ddecfb);
    overflow:hidden;
    position:relative
}
.join-card:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:110px;
    background:linear-gradient(180deg,transparent,#c7e1f3);
    opacity:.65
}
.join-icon{
    font-size:31px;
    color:#0878dc
}
.join-card h2{
    font-size:22px;
    color:#0873cf;
    margin:5px 0 15px
}
.join-card>p{
    font-size:12px;
    line-height:1.8;
    color:#547493;
    margin-bottom:24px
}
.benefits{
    position:relative;
    z-index:1;
    display:grid;
    gap:13px
}
.benefits>div{
    display:flex;
    gap:12px;
    align-items:center
}
.benefits b{
    width:38px;
    height:38px;
    border-radius:12px;
    background:#d8ebff;
    color:#1978d6;
    display:grid;
    place-items:center;
    font-size:20px
}
.benefits strong{
    display:block;
    font-size:12px;
    color:#214e7d
}
.benefits small{
    display:block;
    color:#7391ad;
    font-size:10px;
    margin-top:3px
}
footer{
    text-align:center;
    color:#8da7bf;
    font-size:10px;
    padding:4px 0 25px
}
.toast{
    position:fixed;
    top:85px;
    left:50%;
    transform:translate(-50%,-15px);
    background:#173e6b;
    color:#fff;
    padding:10px 18px;
    border-radius:7px;
    font-size:12px;
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:50
}
.toast.show{
    opacity:1;
    transform:translate(-50%,0)
}
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:#0b2d4b66;
    z-index:60;
    align-items:center;
    justify-content:center
}
.modal.show{
    display:flex
}
.modal-box{
    background:#fff;
    width:min(430px,90vw);
    border-radius:14px;
    text-align:center;
    padding:42px;
    box-shadow:0 25px 80px #06335b33
}
.success{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#e1f3e9;
    color:#2b9b5f;
    display:grid;
    place-items:center;
    margin:0 auto 15px;
    font-size:26px
}
.eyebrow{
    font-size:9px;
    letter-spacing:.18em;
    color:#8aa2b9
}
.modal-box h2{
    font-size:28px;
    margin:10px 0;
    color:#173e6b
}
.modal-box p{
    font-size:13px;
    line-height:1.8;
    color:#6c849c
}
.shake{
    animation:shake .35s
}
@keyframes shake{
    25%{
        transform:translateX(-5px)
    }
    75%{
        transform:translateX(5px)
    }
}
@media(max-width:1050px){
    .application{
        grid-template-columns:190px 1fr
    }
    .join-card{
        display:none
    }
    .hero-inner{
        padding:0 25px
    }
    .hero-slogan{
        margin-right:20px
    }
    .nav{
        gap:22px
    }
}
@media(max-width:720px){
    .topbar{
        padding:0 15px;
        gap:10px
    }
    .brand{
        min-width:auto
    }
    .brand img{
        width:120px
    }
    .nav{
        display:none
    }
    .admin-link{
        padding:8px 10px
    }
    .hero{
        height:auto;
        min-height:235px
    }
    .hero-inner{
        padding:22px;
        align-items:flex-start
    }
    .hero-logo{
        width:120px
    }
    .hero-logo img{
        width:110px
    }
    .hero-text h1{
        font-size:24px
    }
    .hero-text h2{
        font-size:17px
    }
    .hero-text p{
        font-size:11px
    }
    .hero-slogan{
        display:none
    }
    .application{
        display:block;
        margin:12px
    }
    .steps-card{
        min-height:auto;
        margin-bottom:12px
    }
    .steps{
        display:grid;
        grid-template-columns:repeat(4,1fr)
    }
    .step{
        font-size:11px;
        padding:8px 5px
    }
    .step span{
        width:auto;
        margin-right:3px
    }
    .steps-quote{
        display:none
    }
    .form-card{
        padding:18px;
        min-height:600px
    }
    .fields{
        grid-template-columns:1fr
    }
    .field.wide,.field.radio-field{
        grid-column:auto
    }
    .form-actions{
        padding-top:20px
    }
    .section-title p{
        line-height:1.6
    }
}