/* ===============================
   Google Font
================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ===============================
   Global Style
================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:linear-gradient(135deg,#667eea,#764ba2);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;
}


/* ===============================
   Main Card
================================== */

.container{

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

    background:white;

    border-radius:20px;

    padding:40px;

    box-shadow:0px 15px 40px rgba(0,0,0,.2);

}


/* ===============================
   Heading
================================== */

h1{

    text-align:center;

    color:#333;

    margin-bottom:10px;

    font-size:38px;

}

.subtitle{

    text-align:center;

    color:#777;

    margin-bottom:35px;

}


/* ===============================
   Textarea
================================== */

textarea{

    width:100%;

    min-height:180px;

    resize:vertical;

    padding:18px;

    border-radius:12px;

    border:2px solid #ddd;

    outline:none;

    font-size:16px;

    transition:.3s;

}

textarea:focus{

    border-color:#667eea;

    box-shadow:0px 0px 8px rgba(102,126,234,.4);

}


/* ===============================
   Button
================================== */

.btn{

    width:100%;

    margin-top:20px;

    padding:16px;

    background:#667eea;

    color:white;

    border:none;

    border-radius:12px;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.btn:hover{

    background:#5a67d8;

    transform:translateY(-2px);

}


/* ===============================
   Result Card
================================== */

.result{

    margin-top:40px;

    padding:25px;

    border-radius:15px;

    background:#f8f9ff;

    border-left:6px solid #667eea;

}


/* ===============================
   Result Heading
================================== */

.result h2{

    color:#333;

    margin-bottom:20px;

}


/* ===============================
   Labels
================================== */

.label{

    font-weight:600;

    color:#444;

}


/* ===============================
   Prediction Badge
================================== */

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    color:white;

    font-weight:bold;

    margin-top:10px;

}


/* Positive */

.positive{

    background:#28a745;

}


/* Negative */

.negative{

    background:#dc3545;

}


/* ===============================
   Progress Bar
================================== */

.progress{

    width:100%;

    background:#ddd;

    height:24px;

    border-radius:30px;

    overflow:hidden;

    margin-top:10px;

}

.progress-bar{

    height:100%;

    background:linear-gradient(to right,#00c853,#64dd17);

    text-align:center;

    color:white;

    font-size:14px;

    line-height:24px;

    font-weight:bold;

}


/* ===============================
   Footer
================================== */

.footer{

    text-align:center;

    margin-top:35px;

    color:#777;

    font-size:14px;

}


/* ===============================
   Responsive
================================== */

@media(max-width:768px){

.container{

padding:25px;

}

h1{

font-size:30px;

}

textarea{

min-height:150px;

}

}

/* ===============================
   Disabled Button
================================== */

.btn:disabled{

    background:#9aa0a6;

    cursor:not-allowed;

    transform:none;

    opacity:.9;

}