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

body{

background:linear-gradient(135deg,#1976D2,#42A5F5);

padding:40px;

}

.container{

display:flex;

justify-content:center;

align-items:center;

}

.card{

background:white;

width:100%;

max-width:1100px;

padding:40px;

border-radius:20px;

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

}

h1{

text-align:center;

color:#1565C0;

margin-bottom:10px;

}

.subtitle{

text-align:center;

color:#666;

margin-bottom:35px;

}

.grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.full{

grid-column:1/3;

}

.input-group{

display:flex;

flex-direction:column;

}

label{

font-weight:bold;

margin-bottom:8px;

color:#333;

}

input,
select{

padding:13px;

border-radius:10px;

border:1px solid #ddd;

font-size:15px;

transition:.3s;

}

input:focus,
select:focus{

outline:none;

border-color:#1976D2;

box-shadow:0 0 10px rgba(25,118,210,.2);

}

button{

margin-top:35px;

width:100%;

padding:16px;

font-size:18px;

border:none;

border-radius:10px;

background:#1565C0;

color:white;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#0D47A1;

transform:translateY(-2px);

}

.result{

margin-top:35px;

padding:25px;

border-radius:15px;

background:#E3F2FD;

text-align:center;

}

.result h2{

margin-bottom:15px;

color:#1565C0;

}

.result h3{

font-size:28px;

}

@media(max-width:768px){

.grid{

grid-template-columns:1fr;

}

.full{

grid-column:auto;

}

.card{

padding:25px;

}

}