@font-face {
	font-family: "Harabara";
	src: url("fonts/Harabara.ttf") format("truetype");
	font-display: swap;
}

:root { --accent: #0a74da; --accent-dark: #085cb0; }

body.login-page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 1.5rem 1rem;
	color: #fff;
	background: linear-gradient(rgba(6, 20, 36, .62), rgba(6, 20, 36, .78)),
		url("../img/praia-azeda-escada.jpg") center / cover no-repeat fixed;
}

.login-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: #fff;
	text-decoration: none;
}
.login-brand img { width: 52px; height: 52px; object-fit: contain; }
.login-brand span { font-family: "Harabara", sans-serif; font-size: 1.9rem; line-height: 1; }

.login-card {
	width: 100%;
	max-width: 400px;
	padding: 2rem 1.75rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, .97);
	color: #342c26;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.login-card h1 { font-size: 1.25rem; font-weight: 700; color: #2c1607; margin-bottom: .25rem; }
.login-card .sub { color: #6c757d; font-size: .9rem; margin-bottom: 1.25rem; }
.login-card .form-label { font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.login-card .form-control { padding: .65rem .8rem; border-radius: 10px; }
.login-card .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(10, 116, 218, .2); }

.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 3.6rem; }
.pw-toggle {
	position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
	border: 0; background: transparent; color: var(--accent);
	font-size: .8rem; font-weight: 600; padding: .35rem .5rem; border-radius: 6px; cursor: pointer;
}
.pw-toggle:hover { background: rgba(10, 116, 218, .08); }

.btn-login {
	width: 100%; padding: .7rem; border: 0; border-radius: 10px;
	background: var(--accent); color: #fff; font-weight: 600; transition: background .15s;
}
.btn-login:hover:not(:disabled) { background: var(--accent-dark); }
.btn-login:disabled { opacity: .7; cursor: wait; }

.login-back { color: rgba(255, 255, 255, .85); font-size: .85rem; text-decoration: none; }
.login-back:hover { color: #fff; text-decoration: underline; }