*{box-sizing:border-box}
body{
 margin:0;
 background:#f3f6f8;
 color:#17212b;
 font:15px Arial,sans-serif
}
header{
 height:64px;
 background:#213748;
 color:#fff;
 display:flex;
 align-items:center;
 gap:18px;
 padding:0 5%
}
header strong{font-size:22px}
header span{color:#cbd8e1}
header button{margin-left:auto}

main{
 max-width:1100px;
 margin:45px auto;
 padding:0 22px
}

.card{
 background:#fff;
 border:1px solid #dce4ea;
 border-radius:12px;
 padding:22px;
 box-shadow:0 3px 14px #0000000b
}

.login{
 max-width:420px;
 margin:90px auto
}

label{
 display:block;
 margin:18px 0 6px;
 font-weight:bold
}

input{
 width:100%;
 margin-top:7px;
 padding:12px;
 border:1px solid #bcc9d2;
 border-radius:7px;
 font-size:15px
}

button{
 border:0;
 border-radius:7px;
 padding:11px 16px;
 background:#1768a5;
 color:#fff;
 cursor:pointer;
 font-weight:bold
}

button:disabled{
 background:#aab5bd;
 cursor:not-allowed
}

form button{
 width:100%;
 margin-top:18px
}

.error{
 color:#b42318;
 min-height:18px
}

.title{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:24px
}

.title h1{margin:5px 0}
.title small{color:#667784}

.badge{
 background:#e7f5eb;
 color:#16703a;
 padding:7px 12px;
 border-radius:999px;
 font-weight:bold
}

.grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:16px
}

.results{margin-top:18px}
.row{
 padding:12px 0;
 border-bottom:1px solid #e4e9ed
}

@media(max-width:760px){
 .grid{grid-template-columns:1fr}
 header span{display:none}
}