html, body{ height:100%; }

.admin-content{ background:none !important; }

body{
	background:
		radial-gradient(circle at 15% 15%, rgba(25,101,225,.20), transparent 45%),
		radial-gradient(circle at 85% 85%, rgba(0,31,102,.18), transparent 45%),
		linear-gradient(160deg, #0d2ea0 0%, #001f66 55%, #0a2686 100%);
}

#main{
	width:100%;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding:20px;
	box-sizing:border-box;
}

.message{
	position:fixed;
	top:20px;
	left:0;
	right:0;
	margin:0 auto;
	width:90%;
	max-width:400px;
	font-weight:600;
	font-size:14px;
	color:#fff;
	background:var(--brand, #0d2ea0);
	padding:12px 20px;
	border-radius:var(--radius-sm, 6px);
	text-align:center;
	box-shadow:var(--shadow-md, 0 6px 20px rgba(0,0,0,.15));
	z-index:20;
}

#login{
	position:relative;
	background:#fff;
	width:100%;
	max-width:360px;
	font-family:inherit;
	border:1px solid rgba(13,46,160,.10);
	border-radius:16px;
	padding:36px 32px 28px;
	box-shadow:
		0 20px 40px -18px rgba(0,31,102,.35),
		0 8px 24px -8px rgba(13,46,160,.15);
}

#login .logo{
	width:100%;
	height:52px;
	background:url(../img/brother-logo-blue.svg) no-repeat center;
	background-size:contain;
	margin-bottom:20px;
}

#login h2{
	font-size:18px;
	font-weight:700;
	color:var(--ink, #24303a);
	margin:0 0 2px;
	text-align:center;
}

#login .subtitle{
	display:block;
	text-align:center;
	font-size:12px;
	color:var(--muted, #93a1aa);
	margin-bottom:22px;
}

#login .field{ margin-bottom:14px; text-align:left; }

#login label{
	display:block;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--muted, #93a1aa);
	margin-bottom:5px;
}

#login input[type=text], #login input[type=password]{
	width:100%;
	padding:9px 12px;
	border:1px solid var(--border, #e4e9ec);
	border-radius:8px;
	background-color:#fbfcfc;
	font-size:13.5px;
	font-family:inherit;
	color:var(--ink, #24303a);
	box-sizing:border-box;
	transition:border-color .15s, box-shadow .15s, background-color .15s;
}
#login input[type=text]:focus, #login input[type=password]:focus{
	outline:none;
	background-color:#fff;
	border-color:var(--brand, #0d2ea0);
	box-shadow:0 0 0 3px var(--brand-soft, #e7ecf9);
}

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:38px !important; }
.toggle-password{
	position:absolute;
	top:0;
	right:0;
	width:36px;
	height:100%;
	border:none;
	background:transparent;
	cursor:pointer;
	padding:0;
}
.toggle-password::before{
	content:'';
	display:block;
	width:16px;
	height:16px;
	margin:0 auto;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2393a1aa' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
	background-size:contain;
}
.toggle-password.is-visible::before{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%230d2ea0' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
	background-size:contain;
}

.btn-login{
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	display:block;
	width:100%;
	background:linear-gradient(135deg, #1965e1, #0d2ea0);
	color:#fff;
	border:none;
	border-radius:8px;
	padding:11px;
	font-size:13.5px;
	font-family:inherit;
	font-weight:700;
	letter-spacing:.01em;
	cursor:pointer;
	margin-top:6px;
	box-shadow:0 8px 18px -8px rgba(13,46,160,.55);
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-login:hover{
	background:linear-gradient(135deg, #0d2ea0, #001f66);
	box-shadow:0 12px 22px -8px rgba(13,46,160,.6);
	transform:translateY(-1px);
}
.btn-login:active{
	transform:translateY(0);
	box-shadow:0 5px 12px -6px rgba(13,46,160,.5);
}
.btn-login:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px var(--brand-soft, #e7ecf9), 0 8px 18px -8px rgba(13,46,160,.55);
}

a{ text-decoration:none; color:var(--brand-bright, #1965e1); }
a:hover{ color:var(--brand-dark, #001f66); }

.error_msg{
	color:var(--danger, #e5484d);
	font-size:12.5px;
	text-align:center;
	margin-top:12px;
}
.error_msg:empty{ display:none; }

.login-footer{
	display:block;
	text-align:center;
	color:var(--muted, #93a1aa);
	font-size:11px;
	margin-top:22px;
}

@media (max-width: 480px){
	#login{ padding:28px 22px 22px; border-radius:14px; }
}