/* hitadmin — login.css
   Only the login page: the ink field the mascot sits in. */

/* --- login ----------------------------------------------------------------
   One surface, not two. The whole page is the ink field; the mascot's white
   markings and the blue in its eyes are the only light on it, so the art is
   the design rather than decoration sitting beside a form. No card, no paper,
   no seam. ------------------------------------------------------------------ */
.loginwrap {
	position: relative; overflow: hidden;
	min-height: 100vh; display: grid; place-items: center;
	padding: 48px 24px; background: #14130f;
}
/* newsprint halftone — a flat dot grid, never a gradient wash */
.loginwrap::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(#ffffff 1px, transparent 1.1px);
	background-size: 7px 7px; opacity: .05;
}
/* one faint oversized mascot bleeding off the corner, for depth behind the stack */
.loginwrap::after {
	content: ""; position: absolute;
	right: -180px; bottom: -220px; width: 760px; height: 720px;
	background: url(/assets/hero.png) no-repeat center / contain;
	opacity: .05;
}
.loginbox { position: relative; z-index: 1; width: 336px; text-align: center; }
.loginbox .wm { display: block; width: 252px; height: auto; margin: 0 auto; }
.loginbox .rule { width: 44px; height: 2px; border: 0; border-radius: 2px; background: var(--accent); margin: 20px auto 6px; }
.loginbox .tagline {
	color: #8d877e; font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em; margin: 0 0 26px;
}
.loginbox .field { margin-bottom: 14px; text-align: left; }
.loginbox label { color: #8d877e; }
.loginbox input[type=text], .loginbox input[type=password] {
	height: 38px; background: #1f1d19; border-color: #34302a; color: #fff;
}
.loginbox input[type=text]::placeholder, .loginbox input[type=password]::placeholder { color: #6d6862; }
.loginbox input:focus { border-color: var(--accent); outline: 2px solid rgba(0, 102, 153, .35); }
.loginbox .btn { width: 100%; height: 38px; justify-content: center; margin-top: 6px; font-weight: 600; }
.loginbox .flash.err {
	background: rgba(163, 58, 44, .16); border-color: #6d2c23; color: #e8a79c; text-align: left;
}
.loginbox .foot { color: #6d6862; font-size: 11px; margin-top: 20px; line-height: 1.7; }
.loginbox .foot b { color: #8d877e; font-weight: 500; }
@media (max-width: 420px) {
	.loginbox { width: 100%; }
	.loginbox .wm { width: 210px; }
}