*{
    box-sizing:border-box;
}

body{

    margin:0;

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

    background:#fff8ef;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.container{

    width:420px;

    background:white;

    padding:35px;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    border-top:8px solid #E30613;

}

.logo{

    width:90px;

    display:block;

    margin:auto;

    margin-bottom:15px;

}

h1{

    margin:0;

    text-align:center;

    color:#E30613;

    font-size:34px;

}

h2{

    text-align:center;

    margin-top:12px;

    color:#333;

    font-size:24px;

}

.subtitle{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}

label{

    display:block;

    font-weight:bold;

    margin-top:18px;

    margin-bottom:6px;

}

input,
select{

    width:100%;

    padding:14px;

    border:2px solid #ddd;

    border-radius:8px;

    font-size:18px;

}

input:focus,
select:focus{

    outline:none;

    border-color:#FFD200;

}

button{

    width:100%;

    margin-top:30px;

    padding:16px;

    background:#FFD200;

    color:#E30613;

    border:none;

    border-radius:8px;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

button:hover{

    background:#ffca00;

}

button:disabled{

    background:#ddd;

    color:#666;

    cursor:not-allowed;

}

#status{

    margin-top:20px;

    text-align:center;

    color:#555;

    font-weight:bold;

}

.spinner{

    width:20px;

    height:20px;

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

    border-top:3px solid #fff;

    border-radius:50%;

    display:inline-block;

    animation:spin 1s linear infinite;

    vertical-align:middle;

    margin-right:10px;

}

@keyframes spin{

    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}