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

/* Background */
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;

/* Beautiful modern gradient */
background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
}

/* Login/Register Card */
.container{
background: rgba(255,255,255,0.95);
padding:40px;
width:360px;
border-radius:15px;

box-shadow:0 15px 35px rgba(0,0,0,0.4);
}

/* Title */
.container h2{
text-align:center;
margin-bottom:25px;
color:#222;
font-size:26px;
}

/* Input group */
.input-group{
margin-bottom:18px;
}

/* Label */
.input-group label{
display:block;
margin-bottom:6px;
font-size:14px;
color:#333;
}

/* Input fields */
.input-group input{
width:100%;
padding:11px;
border:1px solid #ccc;
border-radius:7px;
font-size:14px;
transition:0.3s;
}

/* Input focus */
.input-group input:focus{
border-color:#667eea;
outline:none;
box-shadow:0 0 8px rgba(102,126,234,0.5);
}

/* Login/Register Button */
button{
width:100%;
padding:12px;

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

border:none;
border-radius:8px;

color:white;
font-size:16px;
font-weight:bold;

cursor:pointer;
transition:0.3s;
}

/* Button hover */
button:hover{
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

/* Bottom text */
.form-link{
text-align:center;
margin-top:15px;
font-size:14px;
}

/* Links */
.form-link a{
color:#667eea;
text-decoration:none;
font-weight:bold;
}

.form-link a:hover{
text-decoration:underline;
}