.buddyseo-serp-box {

    max-width:850px;
    margin:40px auto;
    padding:40px;

    border-radius:28px;

    background:linear-gradient(
        145deg,
        #ffffff,
        #faf5ff
    );

    border:1px solid #eadcff;

    box-shadow:
    0 20px 50px rgba(130,80,255,.12);

}



/* Main Heading */

.buddyseo-serp-box h2 {

    text-align:center;

    font-size:34px;

    margin-bottom:12px;

    background:
    linear-gradient(
        90deg,
        #7c3cff,
        #d43cff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.tool-description {

    text-align:center;

    color:#666;

    font-size:15px;

    line-height:1.6;

    margin-bottom:35px;

}





/* Cards */


.input-card,
.preview-card,
.seo-score-box,
.seo-recommendation {


    background:#ffffff;

    padding:30px;

    border-radius:22px;

    border:1px solid #eee5ff;

    margin-bottom:25px;

    box-shadow:
    0 10px 25px rgba(120,70,255,.06);

}






/* Labels */


label {

    display:block;

    margin-top:18px;

    margin-bottom:8px;

    font-weight:600;

    color:#25223a;

}






/* Inputs */


input,
textarea {


    width:100%;

    padding:16px;

    border-radius:16px;

    border:1px solid #ddd5ff;

    box-sizing:border-box;

    font-size:15px;

    outline:none;

    transition:.3s;

}





input:focus,
textarea:focus {


    border-color:#c83cff;


    box-shadow:
    0 0 15px rgba(200,60,255,.18);

}





textarea {

    height:130px;

    resize:none;

}





/* Counters */


.analysis-row {


    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:13px;

    margin-top:8px;

}





/* Device Buttons */


.device-switch {


    display:flex;

    justify-content:center;

    gap:15px;

    margin:25px 0;

}





.device-btn {


    padding:12px 30px;

    border-radius:30px;

    border:1px solid #ddd5ff;

    background:#ffffff;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}





.device-btn:hover {


    transform:translateY(-2px);

}





.device-btn.active {


    background:

    linear-gradient(
        90deg,
        #7c3cff,
        #d43cff
    );


    color:white;

    border:none;

    box-shadow:

    0 8px 20px rgba(200,60,255,.25);

}








/* Google Preview */


.google-preview {


    padding:25px;

    border-radius:18px;

    border:1px solid #eee;

    background:white;

}





.favicon-preview {


    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f4efff;

    margin-bottom:10px;

}





.preview-title {


    color:#1a0dab;

    font-size:22px;

    font-weight:500;

    margin-bottom:8px;

}





.preview-url {


    color:#188038;

    font-size:14px;

    margin-bottom:10px;

}





.preview-description {


    color:#4d5156;

    line-height:1.5;

    font-size:15px;

}








/* Copy Buttons */


.copy-section {


    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

    margin-bottom:25px;

}





.copy-btn {


    padding:13px 25px;


    border:none;


    border-radius:30px;


    background:

    linear-gradient(
        90deg,
        #7c3cff,
        #d43cff
    );


    color:white;


    cursor:pointer;


    font-size:14px;


    font-weight:600;


    transition:.3s;


    box-shadow:

    0 8px 20px rgba(200,60,255,.25);

}





.copy-btn:hover {


    transform:translateY(-3px);


    box-shadow:

    0 12px 30px rgba(200,60,255,.35);

}





.copy-btn:active {


    transform:scale(.96);

}







/* SEO Score */


.seo-score {


    text-align:center;


    font-size:45px;


    font-weight:700;


    background:

    linear-gradient(
        90deg,
        #7c3cff,
        #d43cff
    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


    margin:20px 0;

}







.seo-score-box ul,
.seo-recommendation ul {


    list-style:none;

    padding:0;

}






.seo-score-box li,
.seo-recommendation li {


    padding:10px 0;

    font-size:15px;

}







/* Toast Notification Future */


.buddyseo-toast {


    position:fixed;

    bottom:30px;

    right:30px;

    padding:15px 25px;

    border-radius:15px;

    background:

    linear-gradient(
        90deg,
        #7c3cff,
        #d43cff
    );

    color:white;

    font-weight:600;

    box-shadow:

    0 10px 30px rgba(0,0,0,.15);

    z-index:9999;

}






/* Mobile */


@media(max-width:600px){


.buddyseo-serp-box {


    margin:20px;

    padding:20px;

}



.buddyseo-serp-box h2 {


    font-size:26px;

}



.analysis-row {


    flex-direction:column;

    gap:5px;

}



.copy-section {


    flex-direction:column;

}



.device-switch {


    flex-direction:column;

}



.copy-btn,
.device-btn {


    width:100%;

}


}