/* ==========================================================================
   User auth pages (login, register, forgot password, mobile verification).
   Styled like the bmtk user login: cadetblue page, a narrow white material
   card, underline inputs with labels and a blue uppercase button.
   ========================================================================== */
:root {
	--au-page: cadetblue;
	--au-card: #ffffff;
	--au-text: #212121;
	--au-muted: #727272;
	--au-line: rgba(0, 0, 0, .12);
	--au-blue: #2196f3;
	--au-blue-2: #1976d2;
	--au-red: #e53935;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.au-body {
	min-height: 100vh; padding: 64px 24px;
	font: 400 15px/1.42857143 "Roboto", sans-serif; color: var(--au-text);
	background: var(--au-page);
}

/* ---------- card ---------- */
.au-card {
	width: 360px; max-width: 100%; margin: 0 auto;
	background: var(--au-card);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}
.au-main { padding: 24px 35px; }
.au-heading { text-align: center; margin-bottom: 32px; }
.au-heading a { display: inline-block; }
.au-logo { width: 50px; height: 50px; display: block; }
.au-title { margin: 18px 0 0; font-size: 24px; font-weight: 400; line-height: 1.2; }
.au-sub { margin: 8px 0 0; color: var(--au-muted); font-size: 13px; }
.au-sub:empty { display: none; }
.au-msg { margin: 0 0 20px; padding: 12px 14px; font-size: 14px; line-height: 1.5;
	background: #fff8e1; border-left: 3px solid #ffb300; color: #5d4037; }
.au-msg.au-err { background: #ffebee; border-left-color: var(--au-red); color: #b71c1c; }

/* ---------- fields ---------- */
.au-field {
	position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
	margin-bottom: 24px; border-bottom: 1px solid var(--au-line);
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.au-field:focus-within { border-color: var(--au-blue); box-shadow: inset 0 -1px 0 var(--au-blue); }
.au-label { flex: 0 0 100%; color: var(--au-muted); font-size: 12px; }
.au-field:focus-within .au-label { color: var(--au-blue); }
.au-field input {
	flex: 1; min-width: 0; padding: 12px 4px; border: 0; outline: 0; background: transparent;
	color: var(--au-text); font: 400 15px/18px "Roboto", sans-serif;
}
.au-field input::placeholder { color: #bdbdbd; }
.au-field input[readonly] { color: var(--au-muted); }
.au-prefix { flex: none; color: var(--au-muted); font-size: 15px; }
/* the static C in front of the login ID, like bmtk */
.au-code-letter { flex: none; font-size: 25px; line-height: 1; }
.au-eye { flex: none; display: flex; padding: 4px; border: 0; background: none; color: var(--au-muted); cursor: pointer; }
.au-eye:hover, .au-eye:focus-visible { color: var(--au-text); }
.au-eye svg { width: 18px; height: 18px; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* captcha: code chip on the left, answer field on the right */
.au-captcha { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.au-captcha .au-field { flex: 1; min-width: 0; margin-bottom: 0; }
.au-captcha-code {
	flex: none; width: 104px; height: 44px; display: flex; align-items: center; justify-content: center;
	border: 1px dashed #8fbcbd; border-radius: 2px; user-select: none;
	background: repeating-linear-gradient(135deg, #f1f8f8 0 6px, #e3f0f0 6px 12px);
	color: #2f6f70; font: italic 700 22px/1 "Courier New", monospace; letter-spacing: 4px;
	text-shadow: 1px 1px 0 #ffffff;
}

.au-check { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--au-muted); font-size: 14px; }
.au-check input { width: 16px; height: 16px; accent-color: var(--au-blue); }

/* ---------- button + links ---------- */
.au-btn {
	width: 100%; min-height: 42px; display: block; margin-top: 32px; padding: 2px 16px;
	border: 0; border-radius: 2px; cursor: pointer;
	background: var(--au-blue); color: #ffffff;
	font: 500 16px/42px "Roboto", sans-serif; text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
	transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
}
.au-btn:hover, .au-btn:focus { box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23); }
.au-btn:active { box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); }
.au-btn svg { display: none; }

.au-links { margin-top: 24px; text-align: center; color: var(--au-muted); font-size: 13px; line-height: 1.6; }
.au-links p { margin: 6px 0 0; }
.au-links a, .au-link { color: var(--au-blue); text-decoration: none; }
.au-links a:hover, .au-link:hover { text-decoration: underline; }
.au-row-end { display: flex; justify-content: flex-end; margin: -12px 0 0; font-size: 13px; }
.au-links .au-home { color: var(--au-muted); }

*:focus-visible { outline: 2px solid var(--au-blue); outline-offset: 2px; }
.au-field input:focus-visible { outline: 0; }

@media (max-width: 400px) {
	body.au-body { padding: 32px 16px; }
	.au-main { padding: 24px 20px; }
}