:root {
	--raincl-navy: #081a33;
	--raincl-blue: #075ed1;
	--raincl-blue-dark: #064aa5;
	--raincl-ink: #152238;
	--raincl-muted: #667085;
	--raincl-border: #d8e0eb;
	--raincl-bg: #eef3f9;
	--raincl-white: #ffffff;
	--raincl-danger: #b42318;
	--raincl-success: #067647;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.raincl-access-page {
	align-items: center;
	background:
		radial-gradient(circle at 12% 5%, rgba(7, 94, 209, .17), transparent 31rem),
		radial-gradient(circle at 95% 90%, rgba(8, 26, 51, .13), transparent 34rem),
		linear-gradient(145deg, #f9fbfe 0%, var(--raincl-bg) 100%);
	color: var(--raincl-ink);
	display: flex;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	justify-content: center;
	margin: 0;
	padding: 28px;
}

.raincl-access-shell { max-width: 470px; width: 100%; }
.raincl-access-card {
	background: rgba(255, 255, 255, .98);
	border: 1px solid rgba(216, 224, 235, .95);
	border-radius: 22px;
	box-shadow: 0 28px 80px rgba(8, 26, 51, .16);
	overflow: hidden;
	padding: 34px 38px 32px;
	position: relative;
}
.raincl-access-card::before {
	background: linear-gradient(90deg, var(--raincl-navy), var(--raincl-blue));
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.raincl-access-brand { margin-bottom: 25px; text-align: center; }
.raincl-access-brand img { display: block; height: 68px; margin: 0 auto 9px; max-width: 220px; object-fit: contain; width: auto; }
.raincl-access-logo { color: var(--raincl-navy); display: block; font-size: 34px; font-weight: 900; letter-spacing: -.04em; margin-bottom: 5px; }
.raincl-access-brand p { color: var(--raincl-muted); font-size: 12px; font-weight: 700; letter-spacing: .16em; margin: 0; text-transform: uppercase; }
.raincl-access-card h1 { color: var(--raincl-navy); font-size: 30px; letter-spacing: -.03em; line-height: 1.16; margin: 0 0 8px; text-align: center; }
.raincl-access-description { color: var(--raincl-muted); line-height: 1.55; margin: 0 0 23px; text-align: center; }
.raincl-access-alert {
	background: #fff3f2;
	border: 1px solid #f4c7c3;
	border-left: 4px solid var(--raincl-danger);
	border-radius: 10px;
	color: var(--raincl-danger);
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 17px;
	padding: 11px 13px;
}
.raincl-access-alert:first-of-type:last-of-type { }
.raincl-access-form label { display: block; font-size: 14px; font-weight: 750; margin: 15px 0 7px; }
.raincl-access-form input[type="text"],
.raincl-access-form input[type="password"] {
	background: var(--raincl-white);
	border: 1px solid #aebbd0;
	border-radius: 11px;
	color: var(--raincl-ink);
	font: inherit;
	font-size: 16px;
	height: 49px;
	outline: 0;
	padding: 0 14px;
	transition: border-color .16s ease, box-shadow .16s ease;
	width: 100%;
}
.raincl-access-form input:focus {
	border-color: var(--raincl-blue);
	box-shadow: 0 0 0 4px rgba(7, 94, 209, .12);
}
.raincl-access-remember { align-items: center; color: var(--raincl-muted); cursor: pointer; display: flex !important; font-weight: 600 !important; gap: 9px; margin: 16px 0 0 !important; }
.raincl-access-remember input { height: 17px; margin: 0; width: 17px; }
.raincl-access-form button {
	appearance: none;
	background: linear-gradient(135deg, var(--raincl-blue), var(--raincl-blue-dark));
	border: 0;
	border-radius: 11px;
	box-shadow: 0 10px 24px rgba(7, 94, 209, .22);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	margin-top: 20px;
	min-height: 49px;
	padding: 13px 18px;
	transition: transform .14s ease, box-shadow .14s ease;
	width: 100%;
}
.raincl-access-form button:hover { box-shadow: 0 13px 30px rgba(7, 94, 209, .28); transform: translateY(-1px); }
.raincl-access-home { color: var(--raincl-blue-dark); display: block; font-size: 14px; font-weight: 700; margin-top: 21px; text-align: center; text-decoration: none; }
.raincl-access-home:hover { text-decoration: underline; }

@media (max-width: 540px) {
	body.raincl-access-page { padding: 14px; }
	.raincl-access-card { border-radius: 17px; padding: 28px 21px 25px; }
	.raincl-access-card h1 { font-size: 27px; }
	.raincl-access-brand img { height: 58px; max-width: 190px; }
}