/* Presentation only. PHP handling and form scripts remain page-owned. */
.sa-account-page, .sa-account-page *, .sa-account-page *::before, .sa-account-page *::after {
	box-sizing:border-box;
}

body.sa-account-page {
	margin:0;
	min-height:100vh;
	min-height:100svh;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:0 24px;
	background:radial-gradient(ellipse at 50% 20%,rgba(38,100,140,.13),transparent 580px),var(--sa-bg);
	color:var(--sa-text);
	font-family:"Segoe UI",Arial,sans-serif;
	font-size:15px;
	line-height:1.65;
	color-scheme:dark;
}

.sa-account-header {
	width:min(1200px,100%);
	padding:24px 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

.sa-account-header .sa-site-brand {
	position:static;
	font-size:12px;
}

.sa-account-back {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	font-size:13px;
	text-decoration:none;
}

.sa-account-page a {
	color:var(--sa-accent);
	text-underline-offset:4px;
}

.sa-account-page a:hover {
	color:#e6faff;
}

.sa-account-page main {
	position:relative;
	width:min(470px,100%);
	min-width:0;
	margin:auto 0;
	padding:clamp(24px,5vw,38px);
	border:1px solid var(--sa-border);
	border-radius:var(--sa-radius);
	background:linear-gradient(145deg,#101f2e,#091421);
	box-shadow:var(--sa-shadow),inset 0 1px rgba(214,239,255,.04);
}

.sa-account-page main::before {
	content:"";
	position:absolute;
	top:-1px;
	left:32px;
	width:72px;
	height:1px;
	background:var(--sa-accent);
}

.sa-account-page .cp-box {
	width:min(526px,100%);
}

.sa-account-page h1 {
	margin:0 0 10px;
	font-size:clamp(24px,4vw,29px);
	font-weight:500;
	line-height:1.3;
	letter-spacing:.01em;
}

.sa-account-intro {
	margin:0 0 28px;
	color:var(--sa-muted);
	font-size:14px;
}

.sa-account-page form {
	margin:0;
}

.sa-account-page :is(.login-field,.register-field,.forgot-field,.cp-field) {
	display:grid;
	gap:8px;
	margin-bottom:18px;
}

.sa-account-page label {
	font-size:13px;
	color:#c6d9e5;
}

.sa-account-page input {
	width:100%;
	min-width:0;
	min-height:48px;
	padding:11px 14px;
	border:1px solid #30495c;
	border-radius:3px;
	background:#07111d;
	color:#edf8ff;
	font:inherit;
	font-size:16px;
	line-height:1.5;
	transition:border-color .18s,background .18s;
}

.sa-account-page input::placeholder {
	color:#829bab;
	opacity:1;
	font-size:14px;
}

.sa-account-page input:hover {
	border-color:#507289;
}

.sa-account-page input:focus {
	border-color:var(--sa-accent);
	background:#0a1826;
	outline:2px solid rgba(141,216,238,.23);
	outline-offset:2px;
}

.sa-account-page input:user-invalid {
	border-color:#ec9eac;
}

.sa-account-page input:disabled {
	opacity:.6;
	cursor:not-allowed;
}

.sa-account-page :is(button[type="submit"],.verify-link) {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:48px;
	margin-top:8px;
	padding:12px 18px;
	border:1px solid #528da5;
	border-radius:3px;
	background:#173c52;
	color:#edfaff;
	font:inherit;
	font-size:14px;
	font-weight:600;
	letter-spacing:.03em;
	line-height:1.5;
	text-decoration:none;
	cursor:pointer;
	transition:background .18s,border-color .18s;
}

.sa-account-page :is(button[type="submit"],.verify-link):hover {
	background:#21516a;
	border-color:var(--sa-accent);
}

.sa-account-page button:disabled {
	opacity:.55;
	cursor:not-allowed;
}

.sa-account-page [role="status"] {
	margin-top:18px;
	font-size:14px;
	line-height:1.65;
}

.sa-account-page [role="status"]:empty {
	margin:0;
}

.sa-account-page [role="status"]:not(:empty) {
	padding:12px 14px;
	border:1px solid #3d6177;
	border-radius:3px;
	background:#102738;
}

.sa-account-page [role="status"].is-error {
	color:#ffc0cb;
	border-color:#78515e;
	background:#2a1c27;
}

.sa-account-page [role="status"].is-success {
	color:#b3eed6;
	border-color:#3f7269;
	background:#102a28;
}

.sa-account-page :is(.login-links,.register-links,.forgot-links,.cp-links) {
	margin-top:24px;
	padding-top:20px;
	border-top:1px solid var(--sa-border);
	color:var(--sa-muted);
	font-size:13px;
	line-height:1.9;
}

.sa-account-page :is(.login-links,.register-links,.forgot-links,.cp-links) a {
	display:inline-block;
	padding-block:5px;
}

.register-note {
	margin-top:18px;
	color:var(--sa-muted);
	font-size:12px;
}

.cp-user {
	margin:22px 0;
	padding:12px 16px;
	border-left:2px solid #6398ad;
	background:#0a1927;
	color:var(--sa-muted);
	font-size:14px;
}

.cp-user strong {
	color:var(--sa-text);
}

.cp-section-title {
	margin:0 0 20px;
	font-size:17px;
	font-weight:500;
	color:var(--sa-text);
}

.verify-box > p:not(.sa-eyebrow) {
	margin:18px 0 24px;
	color:var(--sa-muted);
}

.sa-account-footer {
	width:100%;
	padding:28px 0;
	text-align:center;
	font-size:12px;
	color:#90a9bb;
}

.sa-account-page h1, .sa-account-page p, .sa-account-page [role="status"], .cp-user {
	overflow-wrap:anywhere;
}

@media (max-width:600px) {
	body.sa-account-page {
		padding:0 16px;
	}

	.sa-account-header {
		padding:14px 0 24px;
	}

	.sa-account-header .sa-site-brand {
		font-size:10px;
	}

	.sa-account-back {
		font-size:12px;
	}

	.sa-account-page main {
		margin-block:auto;
	}

}

@media (prefers-reduced-motion:reduce) {
	.sa-account-page input, .sa-account-page button, .sa-account-page .verify-link {
		transition:none;
	}

}