/* QUIZBANK login page */
.qb-login-page{
    min-height:calc(100vh - 140px);
    background:
        radial-gradient(circle at 14% 8%, rgba(255,95,143,.08), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(255,210,222,.18), transparent 23%),
        #f8f9fb;
}

.qb-login-wrap{
    width:min(960px,calc(100% - 40px));
    margin:0 auto;
    padding:58px 0 88px;
}

.qb-login-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
    gap:20px;
    align-items:stretch;
}

.qb-login-card,
.qb-login-side{
    border:1px solid #e8eaed;
    border-radius:24px;
    background:#fff;
    box-shadow:0 16px 48px rgba(33,38,44,.055);
}

.qb-login-card{
    padding:40px 38px;
}

.qb-login-badge{
    display:inline-flex;
    align-items:center;
    height:25px;
    padding:0 10px;
    border-radius:999px;
    background:#fff0f5;
    color:#ff4f82;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.qb-login-head{
    margin-top:14px;
}

.qb-login-head h1{
    margin:0;
    color:#25292f;
    font-size:29px;
    font-weight:700;
    letter-spacing:-1px;
}

.qb-login-head p{
    margin:10px 0 0;
    color:#90959c;
    font-size:12px;
    line-height:1.65;
}

.qb-login-error{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:22px;
    padding:12px 14px;
    border:1px solid #ffd8e3;
    border-radius:12px;
    background:#fff2f5;
}

.qb-login-error span{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#ff4f82;
    color:#fff;
    font-size:10px;
    font-weight:700;
}

.qb-login-error p{
    margin:0;
    color:#c84369;
    font-size:10px;
}

.qb-login-form{
    display:grid;
    gap:20px;
    margin-top:29px;
}

.qb-login-group label{
    display:block;
    margin-bottom:8px;
    color:#373b41;
    font-size:12px;
    font-weight:600;
}

.qb-login-input{
    position:relative;
}

.qb-login-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    text-align:center;
    color:#c2c6cb;
    font-size:9px;
    font-weight:700;
    pointer-events:none;
}

.qb-login-input input{
    width:100%;
    height:51px;
    border:1px solid #dde0e4;
    border-radius:12px;
    padding:0 58px 0 42px;
    background:#fff;
    color:#25282e;
    outline:0;
    font-family:inherit;
    font-size:13px;
    transition:.16s;
}

.qb-login-input input::placeholder{
    color:#b8bcc1;
}

.qb-login-input input:focus{
    border-color:#ff6e98;
    box-shadow:0 0 0 4px rgba(255,79,130,.075);
}

.qb-login-pw-toggle{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:#8c9298;
    font-size:10px;
    cursor:pointer;
}

.qb-login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:-4px;
}

.qb-login-options>label{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0;
    cursor:pointer;
}

.qb-login-options input{
    width:15px;
    height:15px;
    margin:0;
    accent-color:#ff4f82;
}

.qb-login-options label span{
    color:#7d838a;
    font-size:10px;
}

.qb-login-options>div{
    display:flex;
    align-items:center;
    gap:9px;
}

.qb-login-options a{
    color:#858a91;
    font-size:10px;
}

.qb-login-options i{
    width:1px;
    height:10px;
    background:#d8dade;
}

.qb-login-submit{
    height:52px;
    border:0;
    border-radius:13px;
    background:linear-gradient(90deg,#ff4f82,#ff7199);
    color:#fff;
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(255,79,130,.18);
    transition:.16s;
}

.qb-login-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 26px rgba(255,79,130,.22);
}

.qb-login-submit span{
    margin-left:8px;
    font-size:15px;
}

.qb-login-join{
    padding-top:19px;
    border-top:1px solid #eff0f2;
    text-align:center;
}

.qb-login-join p{
    margin:0 0 8px;
    color:#969ba1;
    font-size:10px;
}

.qb-login-join a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 15px;
    border:1px solid #ffd1de;
    border-radius:999px;
    background:#fff8fa;
    color:#ff4f82;
    font-size:10px;
    font-weight:600;
}

.qb-login-side{
    position:relative;
    overflow:hidden;
    padding:36px 30px;
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.65), transparent 20%),
        linear-gradient(145deg,#fff0f5 0%,#ffe7ee 55%,#fff8fa 100%);
}

.qb-login-side:before,
.qb-login-side:after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.42);
}

.qb-login-side:before{
    width:150px;
    height:150px;
    right:-55px;
    top:-55px;
}

.qb-login-side:after{
    width:90px;
    height:90px;
    left:-35px;
    bottom:55px;
}

.qb-login-side-top{
    position:relative;
    z-index:1;
}

.qb-login-side-top>span{
    display:block;
    color:#de6488;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.qb-login-side-top h2{
    margin:10px 0 10px;
    color:#2c3036;
    font-size:27px;
    line-height:1.28;
    letter-spacing:-1px;
}

.qb-login-side-top h2 em{
    color:#ff4f82;
    font-style:normal;
}

.qb-login-side-top p{
    margin:0;
    color:#7f858d;
    font-size:10px;
    line-height:1.7;
}

.qb-login-flow{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:26px;
}

.qb-login-flow div{
    padding:13px 8px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:13px;
    background:rgba(255,255,255,.6);
    text-align:center;
    backdrop-filter:blur(3px);
}

.qb-login-flow i{
    display:block;
    color:#ff7299;
    font-size:8px;
    font-style:normal;
    font-weight:700;
}

.qb-login-flow span{
    display:block;
    margin-top:5px;
    color:#626870;
    font-size:9px;
    font-weight:600;
}

.qb-login-membership{
    position:relative;
    z-index:1;
    display:grid;
    gap:8px;
    margin-top:20px;
}

.qb-login-grade{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:10px;
    align-items:center;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:12px;
    background:rgba(255,255,255,.72);
}

.qb-login-grade>span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    font-size:11px;
    font-weight:800;
}

.qb-login-grade.free>span{
    background:#ffe8ef;
    color:#ff4f82;
}

.qb-login-grade.vip>span{
    background:#fff3d6;
    color:#b27b00;
}

.qb-login-grade.svip>span{
    background:#efe9ff;
    color:#6e50bc;
}

.qb-login-grade b{
    display:block;
    color:#383c42;
    font-size:10px;
}

.qb-login-grade small{
    display:block;
    margin-top:3px;
    color:#8f949b;
    font-size:8px;
}

.qb-login-tip{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:20px;
    padding-top:17px;
    border-top:1px solid rgba(255,255,255,.65);
}

.qb-login-tip span{
    display:inline-flex;
    align-items:center;
    height:19px;
    padding:0 6px;
    border-radius:6px;
    background:#fff;
    color:#ff4f82;
    font-size:7px;
    font-weight:800;
}

.qb-login-tip p{
    margin:1px 0 0;
    color:#858a91;
    font-size:9px;
    line-height:1.55;
}

@media(max-width:760px){
    .qb-login-wrap{
        width:calc(100% - 28px);
        padding:30px 0 60px;
    }

    .qb-login-grid{
        grid-template-columns:1fr;
    }

    .qb-login-side{
        order:-1;
        padding:22px 20px;
    }

    .qb-login-side-top h2{
        font-size:22px;
    }

    .qb-login-membership,
    .qb-login-tip{
        display:none;
    }

    .qb-login-card{
        padding:28px 20px;
    }
}

@media(max-width:430px){
    .qb-login-options{
        align-items:flex-start;
        flex-direction:column;
    }

    .qb-login-flow{
        gap:6px;
    }
}