body {
	 font-family: system-ui, sans-serif; 
	 background:#111; color:#eee; 
	 display:flex; 
	 justify-content:center; 
	 align-items:center; min-height:100vh; 
	 }
	 
.login-card { 
	background:#1b1b1b; 
	padding:2rem 2.5rem; 
	border-radius:12px; 
	max-width:380px; 
	width:100%; 
	box-shadow:0 10px 30px rgba(0,0,0,.6);
	}
	
.login-card h1 {
	 margin-top:0;
	 margin-bottom:1.5rem; 
	 font-size:1.4rem; 
	 text-align:center; 
	 }
	 
label {
	 display:block; 
	 margin-bottom:.25rem; 
	 font-size:.9rem; 
	 }
	 
input[type="email"], input[type="password"] {
    width:100%; 
    padding:.6rem .75rem; 
    border-radius:8px; 
    border:1px solid #555; 
    background:#111; 
    color:#eee;
}

.field { 
	margin-bottom:1rem; 
	}
	
.password-wrapper { 
	position:relative; 
	}
	
.toggle-password {
    position:absolute; 
    right:.6rem; 
    top:50%; 
    transform:translateY(-50%);
    cursor:pointer; 
    user-select:none; 
    font-size:.85rem; 
    color:#aaa;
}

.btn {
    width:100%; 
    padding:.7rem; 
    border-radius:999px; 
    border:none;
    background:#ff0080; 
    color:#fff; 
    font-weight:600; 
    cursor:pointer;
}

.btn:hover { 
	filter:brightness(1.1); 
	}
	
.errors { 
	background:#4b1111; 
	border:1px solid #aa3333; 
	padding:.7rem .9rem; 
	border-radius:8px; 
	font-size:.85rem; 
	margin-bottom:1rem; 
	}
	
.errors ul { 
	margin:0; 
	padding-left:1.2rem; 
	}
	
.hint { 
	font-size:.75rem; 
	color:#aaa; 
	margin-top:-.25rem; 
	margin-bottom:.5rem; 
	}

.btn-secondary {
    display:inline-block;
    margin-top:.5rem;
    padding:.6rem 1.2rem;
    border-radius:999px;
    border:1px solid #666;
    background:#222;
    color:#eee;
    text-decoration:none;
    text-align:center;
}