* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(
        135deg,
        #1565c0,
        #42a5f5
    );

    font-family:
    Arial,
    Helvetica,
    sans-serif;

}



.app-container {

    width: 100%;

    max-width: 420px;

    padding: 20px;

}



.card {

    background:white;

    border-radius:20px;

    padding:30px 25px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.20);

    text-align:center;

}



/* LOGO AREA */

.logo-area h1 {

    margin:0;

    font-size:48px;

    color:#1565c0;

    font-weight:bold;

}



.logo-area h2 {

    margin:5px 0;

    color:#333;

    font-size:24px;

}



.logo-area p {

    color:#777;

    margin-bottom:30px;

}



/* INPUT */

input {


    width:100%;

    padding:14px;

    margin:8px 0;

    border:

    1px solid #ccc;

    border-radius:10px;

    font-size:16px;

}



input:focus {

    outline:none;

    border-color:#1565c0;

}



/* BUTTON */


button {


    width:100%;

    padding:15px;

    margin-top:20px;

    border:none;

    border-radius:10px;

    background:#1565c0;

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}



button:hover {

    background:#0d47a1;

}



button:active {

    transform:scale(0.97);

}



/* STATUS */


#status,
#scanStatus {


    margin-top:20px;

    color:#1565c0;

    font-size:16px;

}



/* USER INFO */


#userInfo {


    background:#f2f5f8;

    padding:15px;

    border-radius:10px;

    margin:20px 0;

    font-size:16px;

}



/* QR AREA */


#reader {


    width:100%;

    margin-top:20px;

    border-radius:10px;

    overflow:hidden;

}



/* STATUS BOX */


.status-box {


    background:#e3f2fd;

    border-radius:10px;

    padding:10px;

    margin-top:15px;

}