/* Modern unauthenticated auth screens: login, logout, and session expiry. */

.se-auth-action:focus,
.se-login-submit:focus,
.se-login-link:focus,
.se-auth-footer a:focus,
.se-login-page-footer a:focus {
	outline: 2px solid rgba(211, 18, 31, 0.34);
	outline-offset: 3px;
}

.se-login-password-wrap {
	position: relative;
}

.se-login-password-wrap .se-login-input {
	padding-right: 44px;
}

.se-login-password-toggle {
	position: absolute;
	right: 13px;
	top: 50%;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	transform: translateY(-50%);
	transition: opacity 160ms ease;
}

.se-login-password-toggle img {
	width: 20px;
	height: 20px;
	display: block;
	opacity: 0.68;
	transition: opacity 160ms ease;
}

.se-login-password-toggle:hover {
	background: transparent;
}

.se-login-password-toggle:hover img,
.se-login-password-toggle:focus img,
.se-login-password-toggle.is-visible img {
	opacity: 0.96;
}

.se-login-password-toggle:focus {
	outline: none;
}

.se-login-submit[disabled] {
	cursor: wait;
	opacity: 0.78;
	transform: none;
}

.se-auth-mobile-band {
	min-height: 150px;
}

body.se-auth-page {
	position: relative;
	min-height: 100vh;
	font-family: Arial, Helvetica, sans-serif;
	color: #2f343b;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 244, 245, 0.94) 44%, rgba(244, 246, 248, 0.96) 100%),
		radial-gradient(circle at 12% 20%, rgba(211, 18, 31, 0.15), transparent 30%),
		radial-gradient(circle at 90% 80%, rgba(211, 18, 31, 0.10), transparent 26%);
	overflow-x: hidden;
}

body.se-auth-page:before,
body.se-auth-page:after {
	content: "";
	position: fixed;
	z-index: 0;
	pointer-events: none;
}

body.se-auth-page:before {
	width: 480px;
	height: 480px;
	left: -145px;
	top: 7vh;
	border: 1px solid rgba(211, 18, 31, 0.20);
	border-radius: 999px;
	background:
		linear-gradient(135deg, rgba(211, 18, 31, 0.09), transparent 58%),
		radial-gradient(circle, rgba(211, 18, 31, 0.12) 0%, rgba(211, 18, 31, 0.07) 38%, transparent 70%);
}

body.se-auth-page:after {
	width: 560px;
	height: 560px;
	right: -190px;
	bottom: -165px;
	border: 1px solid rgba(211, 18, 31, 0.18);
	border-radius: 999px;
	background:
		linear-gradient(315deg, rgba(211, 18, 31, 0.08), transparent 56%),
		radial-gradient(circle, rgba(211, 18, 31, 0.10) 0%, rgba(211, 18, 31, 0.06) 42%, transparent 72%);
}

.se-auth-shell {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 38px 24px;
}

.se-auth-card {
	position: relative;
	width: 70vw;
	max-width: 780px;
	min-width: 640px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 230px 1fr;
	background: #ffffff;
	border: 1px solid rgba(211, 18, 31, 0.14);
	border-radius: 8px;
	box-shadow: 0 22px 60px rgba(31, 41, 55, 0.16);
	animation: seAuthCardIn 420ms ease-out both;
}

.se-auth-card:before,
.se-auth-card:after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.se-auth-card:before {
	width: 190px;
	height: 190px;
	right: -78px;
	top: -86px;
	border: 1px solid rgba(211, 18, 31, 0.18);
	border-radius: 999px;
}

.se-auth-card:after {
	width: 90px;
	height: 1px;
	right: 36px;
	top: 34px;
	background: rgba(211, 18, 31, 0.26);
}

.se-auth-visual {
	position: relative;
	z-index: 1;
	min-height: 310px;
	padding: 30px;
	color: #ffffff;
	background:
		linear-gradient(145deg, rgba(130, 13, 22, 0.88), rgba(211, 18, 31, 0.94)),
		linear-gradient(45deg, rgba(255, 255, 255, 0.12), transparent);
	overflow: hidden;
}

.se-auth-visual:before,
.se-auth-visual:after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	pointer-events: none;
}

.se-auth-visual:before {
	width: 190px;
	height: 190px;
	right: -70px;
	top: -54px;
	background: rgba(255, 255, 255, 0.08);
}

.se-auth-visual:after {
	width: 260px;
	height: 260px;
	left: -130px;
	bottom: -118px;
	background: rgba(255, 255, 255, 0.06);
}

.se-auth-mark,
.se-auth-visual-note {
	position: relative;
	z-index: 1;
}

.se-auth-mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.se-auth-mark-icon {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 16px;
}

.se-auth-visual-note {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.78);
}

.se-auth-visual-line {
	width: 42px;
	height: 2px;
	background: rgba(255, 255, 255, 0.42);
}

.se-auth-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 310px;
	padding: 46px;
	background:
		linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f8f9fb 100%);
}

.se-auth-kicker {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: #d1121f;
	text-transform: uppercase;
}

.se-auth-title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: #242832;
}

.se-brand-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #d1121f;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0;
}

.se-brand-title-main {
	display: inline-block;
}

.se-brand-title-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 24px;
	padding: 0 7px;
	border: 1px solid #f1c7ca;
	border-radius: 6px;
	background: #fff4f4;
	color: #b20d15;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.5px;
	box-sizing: border-box;
}

.se-auth-message {
	margin: 0 0 24px;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.7;
}

.se-auth-form {
	margin-top: 8px;
}

.se-auth-field {
	margin-bottom: 18px;
}

.se-auth-field label {
	display: block;
	margin-bottom: 7px;
	color: #374151;
	font-size: 13px;
	font-weight: 700;
}

.se-auth-input {
	width: 100%;
	height: 42px;
	padding: 0 13px;
	border: 1px solid #d7dbe2;
	border-radius: 6px;
	background: #fbfcfd;
	color: #242832;
	font-size: 14px;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.se-auth-input:focus {
	border-color: #d1121f;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(211, 18, 31, 0.11);
}

.se-auth-message-box {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid #f1c7ca;
	border-radius: 6px;
	background: #fff7f8;
	color: #8f1119;
	font-size: 13px;
	line-height: 1.6;
}

.se-auth-message-box:empty {
	display: none;
}

.se-auth-message-box ul {
	margin: 8px 0 0 18px;
	padding: 0;
}

.se-auth-message-box.is-success {
	border-color: #c7e2d2;
	background: #f4fbf7;
	color: #286744;
}

.se-auth-readonly-value {
	margin: 0;
	padding: 11px 13px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #f8f9fb;
	color: #374151;
	font-size: 14px;
	line-height: 1.4;
}

.se-auth-note {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 6px;
	background: #f8f9fb;
	color: #5d6673;
	font-size: 12px;
	line-height: 1.6;
}

.se-auth-note strong {
	color: #286744;
}

.se-auth-note ul {
	margin: 8px 0 0 18px;
	padding: 0;
}

.se-auth-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.se-auth-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-width: 132px;
	height: 42px;
	padding: 0 22px;
	border-radius: 6px;
	background: #d1121f;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 20px rgba(211, 18, 31, 0.22);
	transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

input.se-auth-action {
	border: 0;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
}

.se-auth-action:hover,
.se-auth-action:focus {
	background: #b90f1a;
	box-shadow: 0 12px 24px rgba(211, 18, 31, 0.28);
	transform: translateY(-1px);
}

.se-auth-link {
	color: #d1121f;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.se-auth-link:hover,
.se-auth-link:focus {
	text-decoration: underline;
}

.se-auth-footer {
	width: 70vw;
	max-width: 780px;
	min-width: 640px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	padding: 8px 12px;
	color: #6b7280;
	font-size: 11px;
	line-height: 2.2;
}

.se-auth-footer-brand {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 24px;
	padding: 3px 12px 3px 44px;
	border: 1px solid rgba(215, 220, 226, 0.72);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.58);
}

.se-auth-footer-logo {
	position: absolute;
	left: 12px;
	top: 50%;
	width: 24px;
	max-height: 24px;
	transform: translateY(-50%);
	opacity: 0.68;
}

.se-auth-footer a {
	color: #d1121f;
	font-weight: 700;
	text-decoration: none;
}

.se-auth-footer a:hover,
.se-auth-footer a:focus {
	text-decoration: underline;
}

.se-auth-footer-dot {
	color: #b6bdc7;
}

@keyframes seAuthCardIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 820px) {
	.se-auth-card {
		width: min(92vw, 620px);
		min-width: 0;
		grid-template-columns: 1fr;
	}

	.se-auth-footer {
		width: min(92vw, 620px);
		min-width: 0;
	}

	.se-auth-visual {
		min-height: 150px;
		padding: 24px;
	}

	.se-auth-visual-note {
		display: none;
	}
}

@media (max-width: 560px) {
	.se-auth-shell {
		align-items: flex-start;
		padding: 18px;
	}

	.se-auth-card,
	.se-auth-footer {
		width: 100%;
	}

	.se-auth-content {
		min-height: 260px;
		padding: 30px 22px;
	}

	.se-auth-action {
		width: 100%;
	}

	.se-auth-footer {
		margin-top: 14px;
		text-align: center;
	}

	.se-login-visual {
		min-height: 140px !important;
	}

	.se-login-visual h1 {
		font-size: 22px !important;
		margin: 18px 0 6px !important;
	}

	.se-login-visual p {
		display: none;
	}
}