/* =========================
   TTping Premium Pastel UI
========================= */


:root{

    --bg:#eef7f5;

    --card:rgba(255,255,255,.65);

    --primary:#62d9a8;

    --primary-dark:#38b987;

    --blue:#8fd3ff;

    --text:#17202a;

    --muted:#6b7280;

    --border:rgba(255,255,255,.8);

    --shadow:
    0 20px 50px rgba(45,90,80,.15);

}


*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


body{

    font-family:
    'Inter',
    sans-serif;

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #eef7ff,
        #f1fff7
    );


    color:var(--text);

    overflow-x:hidden;

    padding:40px 15px;

}



/* Background blobs */


body::before{

    content:"";

    position:fixed;

    width:400px;
    height:400px;

    background:#a8e6cf;

    border-radius:50%;

    filter:blur(100px);

    top:-150px;
    left:-150px;

    opacity:.5;

    z-index:-1;

}


body::after{

    content:"";

    position:fixed;

    width:350px;
    height:350px;

    background:#a7d8ff;

    border-radius:50%;

    filter:blur(100px);

    bottom:-100px;
    right:-100px;

    opacity:.5;

    z-index:-1;

}




/* Container */


.container{

    width:100%;

    max-width:520px;

    margin:auto;

}



/* Main Card */


.card{


    background:
    var(--card);


    backdrop-filter:
    blur(25px);


    border:

    1px solid var(--border);


    border-radius:30px;


    padding:35px;


    box-shadow:
    var(--shadow);


}



/* Logo */


.logo{
    width:90px;
    height:90px;

    margin:0 auto;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    overflow:hidden;

    background:#ffffff;

    border:3px solid rgba(255,255,255,.9);

    box-shadow:
    0 8px 25px rgba(0,0,0,.15),
    0 0 0 5px rgba(98,217,168,.18);

    padding:8px;
}


.logo img{

    width:160%;
    height:160%;

    object-fit:contain;

    border-radius:50%;

    display:block;
}




h1{


    text-align:center;


    margin-top:20px;


    font-size:34px;


    font-weight:800;


}


.subtitle{


    text-align:center;


    color:var(--muted);


    margin-top:8px;


}



/* Status */


.badge{


    width:max-content;


    margin:20px auto;


    display:flex;


    align-items:center;


    gap:8px;


    padding:10px 18px;


    border-radius:50px;


    background:#e8fff4;


    color:#20a86b;


    font-size:14px;


}



.dot{


    width:9px;

    height:9px;


    background:#20c878;


    border-radius:50%;


}





/* Config List */


.configs{


    margin-top:25px;


}



.config-item{


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:15px;


    background:

    rgba(255,255,255,.75);


    border:

    1px solid #ffffff;


    padding:15px;


    margin-bottom:12px;


    border-radius:18px;


    transition:.3s;


}



.config-item:hover{


    transform:translateY(-3px);


    box-shadow:

    0 10px 25px

    rgba(0,0,0,.08);


}



.config-info{


    text-align:right;


}



.config-info h3{


    font-size:15px;


    margin-bottom:5px;


}



.config-info span{


    font-size:13px;


    color:var(--muted);


}





/* Copy Button */


.copy-btn{


    border:none;


    cursor:pointer;


    padding:10px 18px;


    border-radius:12px;


    background:


    linear-gradient(

    135deg,

    #62d9a8,

    #8fd3ff

    );


    color:white;


    font-weight:700;


}






/* Buttons */


.btn{


    width:100%;


    display:block;


    text-align:center;


    padding:15px;


    margin-top:15px;


    border-radius:16px;


    font-weight:700;


    text-decoration:none;


    transition:.3s;


}





.btn-primary{


    border:none;


    cursor:pointer;


    color:white;


    background:


    linear-gradient(

    135deg,

    #62d9a8,

    #38b987

    );


}



.btn-secondary{


    color:#38b987;


    background:white;


    border:

    1px solid #d9f7eb;


}



/* Subscription */


.subscription{


    margin-top:25px;


    text-align:right;


}

.qr{
    display:block;

    width:220px;
    max-width:100%;

    margin:25px auto;

    background:white;

    padding:10px;

    border-radius:18px;

    object-fit:contain;
}


.subscription-title{


    font-size:14px;

    color:var(--muted);

    margin-bottom:10px;


}




/* Footer */


.footer{


    margin-top:30px;


    padding-top:20px;


    border-top:

    1px solid rgba(0,0,0,.05);


    text-align:center;


    color:var(--muted);


    font-size:13px;


    line-height:2;


}





/* Mobile */


@media(max-width:600px){


    body{

        padding:20px 12px;

    }



    .card{

        padding:25px 18px;

    }


    h1{

        font-size:28px;

    }



    .config-item{

        flex-direction:column;

        align-items:stretch;

    }


    .copy-btn{

        width:100%;

    }


}