:root {
	--pcs-ink: #0f1f2a;
	--pcs-ink-2: #2a3e4d;
	--pcs-muted: #5b7280;
	--pcs-line: #d6e1e6;
	--pcs-line-strong: #c2d2d8;
	--pcs-surface: #ffffff;
	--pcs-surface-alt: #f3f6f8;
	--pcs-bg: #eef2f4;
	--pcs-primary: #1f8a7a;
	--pcs-primary-strong: #156a5d;
	--pcs-primary-soft: #d6ece8;
	--pcs-primary-ring: rgba(31, 138, 122, 0.22);
	--pcs-accent-blue: #4d8fd1;
	--pcs-accent-amber: #d68f3a;
	--pcs-danger: #c95151;
	--pcs-radius: 18px;
	--pcs-radius-sm: 12px;
	--pcs-font: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans CJK SC",
		"Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
	min-height: 100%;
	height: 100%;
	background:
		radial-gradient(1100px 600px at 8% 12%, rgba(31, 138, 122, 0.20), transparent 62%),
		radial-gradient(900px 700px at 92% 88%, rgba(77, 143, 209, 0.16), transparent 64%),
		linear-gradient(135deg, #f4f9f8 0%, #eaf2f3 50%, #e2ebee 100%);
	background-attachment: fixed;
	font-family: var(--pcs-font);
}

body,
#page-pcs-login,
.page-content-wrapper,
.page-header-wrapper,
.page-header,
.web-container,
.page_content,
.page_content > div,
.container,
.container-fluid {
	overflow-x: hidden;
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.web-container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.navbar,
footer,
.web-footer {
	display: none !important;
}

.page_content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
}

/* ============== Page layout: full-bleed with content centered ============== */
.pcs-login-page {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: stretch;
	min-height: 100vh;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	color: var(--pcs-ink);
	overflow: hidden;
	background: transparent;
}

.pcs-login-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.pcs-login-grid {
	position: absolute;
	inset: -120px;
	opacity: 0.38;
	background-image:
		linear-gradient(rgba(31, 138, 122, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(31, 138, 122, 0.10) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 88%);
	animation: pcsGridDrift 22s linear infinite;
}

.pcs-orbit {
	position: absolute;
	border: 1px solid rgba(31, 138, 122, 0.22);
	border-radius: 999px;
}

.pcs-orbit::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--pcs-primary);
	box-shadow: 0 0 0 8px rgba(31, 138, 122, 0.12);
	animation: pcsOrbitDot 14s linear infinite;
}

.pcs-orbit-a {
	width: 520px;
	height: 200px;
	left: 5%;
	bottom: 8%;
	transform: rotate(-14deg);
	animation: pcsFloat 9s ease-in-out infinite;
}

.pcs-orbit-a::after { left: 0; top: 50%; }

.pcs-orbit-b {
	width: 360px;
	height: 140px;
	right: 6%;
	top: 10%;
	transform: rotate(20deg);
	animation: pcsFloat 11s ease-in-out infinite reverse;
}

.pcs-orbit-b::after { left: 100%; top: 50%; animation-direction: reverse; }

/* ============== Hero (left) ============== */
.pcs-login-hero,
.pcs-login-panel {
	position: relative;
	z-index: 1;
}

.pcs-login-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 6vw, 96px) clamp(40px, 6vw, 110px);
	animation: pcsReveal 900ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.pcs-login-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	padding: 8px 14px;
	width: fit-content;
	border: 1px solid rgba(31, 138, 122, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: var(--pcs-primary-strong);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	box-shadow: 0 10px 24px rgba(27, 43, 54, 0.06);
	backdrop-filter: blur(8px);
}

.pcs-login-kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--pcs-primary);
	box-shadow: 0 0 0 6px rgba(31, 138, 122, 0.14);
	animation: pcsPulse 2.4s ease-in-out infinite;
}

.pcs-login-hero h1 {
	max-width: 9em;
	margin: 0 0 22px;
	color: #0f2128;
	font-size: clamp(40px, 5.4vw, 72px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.045em;
}

.pcs-login-hero h1 .pcs-accent {
	background: linear-gradient(135deg, var(--pcs-primary) 0%, var(--pcs-accent-blue) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pcs-login-hero p {
	max-width: 30em;
	margin: 0 0 8px;
	color: var(--pcs-muted);
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.85;
}

/* ============== Animated process flow visual ============== */
.pcs-login-visual {
	position: relative;
	margin-top: clamp(40px, 6vh, 80px);
	max-width: 560px;
	height: 260px;
}

.pcs-flow-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pcs-flow-path {
	fill: none;
	stroke: rgba(31, 138, 122, 0.32);
	stroke-width: 2;
	stroke-dasharray: 6 6;
	animation: pcsDashFlow 18s linear infinite;
}

.pcs-flow-path-glow {
	fill: none;
	stroke: url(#pcsFlowGrad);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 90 1000;
	animation: pcsFlowProgress 5s ease-in-out infinite;
}

.pcs-visual-card {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border: 1px solid rgba(214, 225, 230, 0.95);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 14px 32px rgba(27, 43, 54, 0.10);
	backdrop-filter: blur(14px);
	z-index: 2;
	animation: pcsCardLift 6s ease-in-out infinite;
	transition: transform 240ms ease, box-shadow 240ms ease;
}

.pcs-visual-card:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 22px 44px rgba(27, 43, 54, 0.15);
}

.pcs-card-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--pcs-primary-soft), rgba(255, 255, 255, 0.9));
	color: var(--pcs-primary-strong);
}

.pcs-card-icon svg {
	width: 18px;
	height: 18px;
}

.pcs-card-text {
	color: var(--pcs-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.pcs-card-step {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--pcs-primary);
	margin-right: 4px;
}

.pcs-card-1 { left: 0; top: 12px; animation-delay: 0s; }
.pcs-card-2 { left: 36%; top: 100px; animation-delay: 0.6s; }
.pcs-card-3 { left: 8%; top: 188px; animation-delay: 1.2s; }
.pcs-card-4 { right: 0; top: 60px; animation-delay: 1.8s; }

/* ============== Login panel (right) ============== */
.pcs-login-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(32px, 4vw, 64px);
	animation: pcsPanelIn 950ms cubic-bezier(0.2, 0.9, 0.2, 1) 120ms both;
}

.pcs-login-panel > section {
	display: none;
	width: min(440px, 100%);
}

.pcs-login-panel > section.for-login {
	display: block;
}

.pcs-login-panel > section {
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 24px;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)),
		linear-gradient(120deg, rgba(31, 138, 122, 0.10), transparent);
	box-shadow:
		0 32px 80px rgba(27, 43, 54, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(22px) saturate(150%);
	overflow: hidden;
	transition: transform 400ms ease, box-shadow 400ms ease;
}

.pcs-login-panel > section:hover {
	box-shadow:
		0 38px 92px rgba(27, 43, 54, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.pcs-login-panel .page-card {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.pcs-login-card-head {
	padding: 36px 32px 8px;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 16px;
}

.pcs-card-title-block {
	min-width: 0;
	flex: 1;
}

.pcs-card-logo-wrap {
	flex-shrink: 0;
}

.pcs-card-logo {
	width: 56px;
	height: 56px;
	position: relative;
	animation: pcsLogoFloat 4s ease-in-out infinite;
}

.pcs-card-logo svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 8px 20px rgba(31, 138, 122, 0.35));
}

.pcs-card-logo::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(31, 138, 122, 0.3), transparent 50%, transparent);
	opacity: 0;
	animation: pcsLogoGlow 3s ease-in-out infinite;
	z-index: -1;
}

.pcs-login-card-head h4 {
	margin: 0;
	color: var(--pcs-ink);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	white-space: nowrap;
}

.pcs-login-card-head p {
	margin: 8px 0 0;
	color: var(--pcs-muted);
	font-size: 13.5px;
	line-height: 1.65;
	max-width: 21em;
}

/* Hide duplicated brand inside login card (we already brand on hero) */
.pcs-login-card-head .pcs-login-brand {
	display: none;
}


.pcs-login-fields {
	padding-top: 20px;
}

/* Override frappe login card max-width */
.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.for-email-login .page-card {
	max-width: none !important;
}

.pcs-login-fields .form-group {
	margin-bottom: 12px;
}

.pcs-login-fields .form-label {
	display: block;
	margin-bottom: 6px;
	color: var(--pcs-ink-2);
	font-size: 13px;
	font-weight: 700;
}

.pcs-login-input-wrap {
	position: relative;
	display: block;
}

.pcs-login-input-wrap .form-control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 46px;
	line-height: 46px;
	padding: 0 60px 0 42px;
	border: 1px solid var(--pcs-line);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--pcs-ink);
	font-size: 14px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.pcs-login-input-wrap .form-control:hover {
	border-color: var(--pcs-line-strong);
}

.pcs-login-input-wrap .form-control:focus {
	border-color: var(--pcs-primary);
	background: #fff;
	box-shadow: 0 0 0 4px var(--pcs-primary-ring);
	outline: none;
}

.pcs-field-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	width: 17px;
	height: 17px;
	color: var(--pcs-muted);
	transform: translateY(-50%);
	pointer-events: none;
	transition: color 200ms ease;
}

.pcs-field-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.pcs-login-input-wrap .form-control:focus ~ .pcs-field-icon {
	color: var(--pcs-primary);
}

/* Show/hide password button — perfectly aligned vertical center */
.pcs-login-page .password-field .toggle-password,
.toggle-password {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	height: 26px;
	padding: 0 8px;
	display: inline-flex !important;
	align-items: center;
	color: var(--pcs-primary-strong) !important;
	font-size: 12px;
	font-weight: 700;
	border-radius: 7px;
	transform: translateY(-50%);
	cursor: pointer;
	user-select: none;
	transition: background-color 180ms ease;
	z-index: 2;
}

.toggle-password:hover {
	background-color: var(--pcs-primary-soft);
}

.forgot-password-message {
	margin: 2px 0 0;
	text-align: right;
}

.forgot-password-message a,
.sign-up-message a {
	color: var(--pcs-primary-strong);
	font-weight: 700;
}

.page-card-actions {
	padding-top: 6px;
	padding-bottom: 32px;
}

.pcs-login-submit,
.page-card-actions .btn-primary {
	display: block;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	height: 46px;
	line-height: 46px;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 13px !important;
	background: linear-gradient(135deg, var(--pcs-primary), var(--pcs-primary-strong)) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	box-shadow: 0 18px 34px rgba(31, 138, 122, 0.26) !important;
	transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
	cursor: pointer;
	overflow: hidden;
}

.pcs-login-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
	transform: translateX(-120%);
	transition: transform 600ms ease;
	pointer-events: none;
}

.pcs-login-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 46px rgba(31, 138, 122, 0.34) !important;
	filter: brightness(1.04);
}

.pcs-login-submit:hover::before {
	transform: translateX(120%);
}

.pcs-login-submit:active {
	transform: translateY(0);
}

.pcs-btn-loading {
	display: none;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -3px;
	animation: pcsSpin 800ms linear infinite;
}

.pcs-login-page.is-authenticating .pcs-btn-loading {
	display: inline-block;
}

.pcs-login-page.is-authenticating .pcs-login-submit {
	pointer-events: none;
}

.login-divider,
.sign-up-message {
	color: var(--pcs-muted) !important;
}

.sign-up-message {
	margin: 16px 0 0;
	font-size: 13px;
}

.social-logins {
	padding: 0 32px 32px;
}

.btn-login-option,
.btn-default {
	border: 1px solid var(--pcs-line) !important;
	border-radius: 13px !important;
	background: rgba(255, 255, 255, 0.72) !important;
	color: var(--pcs-ink-2) !important;
	font-weight: 700;
}

.for-forgot,
.for-signup,
.for-login-with-email-link {
	padding-bottom: 1px;
}

.for-forgot .page-card-body,
.for-login-with-email-link .page-card-body {
	padding: 24px 30px 16px;
}

.for-forgot .form-control,
.for-login-with-email-link .form-control {
	padding-left: 16px;
}

.pcs-login-noscript {
	position: relative;
	z-index: 5;
	margin: 20px;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	color: var(--pcs-danger);
}

.pcs-login-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	pointer-events: none;
	visibility: hidden;
}

.pcs-login-transition div {
	background: var(--pcs-primary-strong);
	transform: scaleY(0);
	transform-origin: bottom;
}

.pcs-login-page.login-success .pcs-login-transition {
	visibility: visible;
}

.pcs-login-page.login-success .pcs-login-transition div {
	animation: pcsWipe 720ms cubic-bezier(0.78, 0, 0.22, 1) forwards;
}

.pcs-login-page.login-success .pcs-login-transition div:nth-child(2) {
	animation-delay: 80ms;
}

.pcs-login-page.login-success .pcs-login-transition div:nth-child(3) {
	animation-delay: 160ms;
}

/* ============== Loading indicator after wipe ============== */
.pcs-login-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 400ms ease;
}

.pcs-login-page.login-success .pcs-login-loading {
	animation: pcsLoadingFadeIn 400ms ease 880ms forwards;
}

.pcs-loading-spinner {
	width: 48px;
	height: 48px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pcsLoadingSpin 1s linear infinite;
}

.pcs-loading-text {
	margin-top: 20px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	opacity: 0.9;
}

/* ============== Animations ============== */
@keyframes pcsReveal {
	from { opacity: 0; filter: blur(12px); transform: translateY(18px); }
	to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes pcsPanelIn {
	from { opacity: 0; filter: blur(10px); transform: translateX(28px) scale(0.98); }
	to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
}

@keyframes pcsGridDrift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(48px, 48px, 0); }
}

@keyframes pcsFloat {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -16px; }
}

@keyframes pcsOrbitDot {
	from { offset-distance: 0%; }
	to { offset-distance: 100%; }
}

@keyframes pcsCardLift {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes pcsPulse {
	0%, 100% { box-shadow: 0 0 0 6px rgba(31, 138, 122, 0.14); }
	50% { box-shadow: 0 0 0 10px rgba(31, 138, 122, 0.04); }
}

@keyframes pcsLogoFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes pcsLogoGlow {
	0%, 100% { opacity: 0; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes pcsDashFlow {
	to { stroke-dashoffset: -240; }
}

@keyframes pcsFlowProgress {
	0% { stroke-dashoffset: 0; opacity: 0.6; }
	60% { stroke-dashoffset: -540; opacity: 1; }
	100% { stroke-dashoffset: -1100; opacity: 0; }
}

@keyframes pcsSpin {
	to { transform: rotate(360deg); }
}

@keyframes pcsWipe {
	to { transform: scaleY(1); }
}

@keyframes pcsLoadingFadeIn {
	from { opacity: 0; visibility: hidden; }
	to { opacity: 1; visibility: visible; }
}

@keyframes pcsLoadingSpin {
	to { transform: rotate(360deg); }
}

/* ============== Responsive ============== */
@media (max-width: 1100px) {
	.pcs-login-hero {
		padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 64px);
	}
}

@media (max-width: 980px) {
	.pcs-login-page {
		grid-template-columns: 1fr;
		min-height: 100vh;
		overflow: auto;
	}
	.pcs-login-hero {
		padding: 56px 24px 24px;
	}
	.pcs-login-visual {
		display: none;
	}
	.pcs-login-panel {
		padding: 12px 24px 56px;
	}
	.pcs-login-panel > section {
		width: min(460px, 100%);
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.pcs-login-hero h1 {
		font-size: 36px;
	}
	.pcs-login-card-head,
	.pcs-login-fields,
	.page-card-actions,
	.social-logins {
		padding-left: 22px;
		padding-right: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}