/* Kryyvo "Sky" login — design ref 2a.
   Values are from the handoff spec; treat them as fixed.

   Note on section visibility: frappe's login.js drives routing with
   jQuery .toggle(). Sections are hidden here in CSS (so all four cards don't
   flash on first paint) which is safe because jQuery's show() falls back to
   the element's default display when a stylesheet still hides it. */

:root {
	--ky-blue-500: #45a6dc;
	--ky-blue-600: #3592c9;
	--ky-blue-400: #4fb0e4;
	--ky-blue-300: #2f8fc9;
	--ky-navy-900: #10283a;
	--ky-navy-700: #2b4557;
	--ky-navy-500: #6c7f8f;
	--ky-gray-400: #8fa2b1;
	--ky-yellow-500: #f9c013;
	--ky-yellow-700: #b98a00;
}

body {
	margin: 0;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	background: #eaf5fb;
}

/* frappe's web shell renders its own navbar and footer around our content.
   The footer carries a "Powered by ERPNext" link, and the design has its own
   footer, so both are removed here. Not scoped with `body >` — the shell
   nests them deeper than that. */
.main-section,
footer.web-footer,
footer,
.website-footer,
.footer-powered,
.navbar { display: none !important; }

.hide { display: none !important; }

/* ---------- sky ---------- */
.ky-sky {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: linear-gradient(180deg, #7fc4ea 0%, #a9d9f1 26%, #cfe9f7 52%, #eaf5fb 74%, #f7fbfd 100%);
}

@keyframes kdrift {
	0%   { transform: translate3d(0,0,0) scale(1); }
	50%  { transform: translate3d(3%,-4%,0) scale(1.07); }
	100% { transform: translate3d(0,0,0) scale(1); }
}

.ky-clouds {
	position: absolute; inset: -6%;
	pointer-events: none;
	transform: translateY(calc(var(--p, 0) * 46px));
}
.ky-cloud { position: absolute; border-radius: 50%; }
.ky-cloud-1 {
	left: -6%; bottom: -6%; width: 820px; height: 400px; filter: blur(6px);
	background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.98), rgba(255,255,255,0) 68%);
	animation: kdrift 34s ease-in-out infinite;
}
.ky-cloud-2 {
	right: -10%; bottom: -2%; width: 900px; height: 430px; filter: blur(8px);
	background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.95), rgba(255,255,255,0) 66%);
	animation: kdrift 41s ease-in-out infinite reverse;
}
.ky-cloud-3 {
	left: 26%; bottom: -14%; width: 700px; height: 380px; filter: blur(4px);
	background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,1), rgba(255,255,255,0) 64%);
	animation: kdrift 28s ease-in-out infinite;
}

.ky-puff { position: absolute; border-radius: 50%; pointer-events: none; }
.ky-puff-1 {
	left: 12%; top: 16%; width: 300px; height: 120px; filter: blur(8px);
	background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%);
	transform: translate3d(calc(var(--p, 0) * -90px), 0, 0);
	animation: kdrift 26s ease-in-out infinite;
}
.ky-puff-2 {
	right: 10%; top: 26%; width: 240px; height: 100px; filter: blur(10px);
	background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
	transform: translate3d(calc(var(--p, 0) * 110px), 0, 0);
	animation: kdrift 33s ease-in-out infinite reverse;
}

.ky-arcs {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: .85; pointer-events: none;
	transform: translateY(calc(var(--p, 0) * -30px));
}

/* ---------- logo lockup ---------- */
.ky-logo-pill {
	position: absolute; left: 44px; top: 36px;
	padding: 10px 18px; border-radius: 14px;
	background: rgba(255,255,255,.9);
	border: 1px solid rgba(255,255,255,.95);
	box-shadow: 0 10px 24px -14px rgba(13,53,80,.6);
	backdrop-filter: blur(10px);
	z-index: 2;
}
.ky-logo-pill img { height: 30px; width: 125px; object-fit: contain; object-position: left; display: block; }

/* ---------- card ---------- */
.ky-stage {
	position: relative;
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	box-sizing: border-box; padding: 40px;
}
.ky-stage > section { display: none; width: 100%; }
.ky-stage > section.for-login { display: block; }

.ky-card {
	width: 452px; max-width: 100%;
	margin: 0 auto;
	padding: 0 0 34px;
	box-sizing: border-box;
	border-radius: 26px;
	border: 1px solid rgba(255,255,255,.85);
	background: linear-gradient(180deg, rgba(202,236,250,.85) 0%, rgba(255,255,255,.94) 42%, rgba(255,255,255,.97) 100%);
	backdrop-filter: blur(14px);
	box-shadow: 0 40px 80px -34px rgba(13,53,80,.42), 0 2px 6px rgba(13,53,80,.06);
	transform: translateY(calc(var(--p, 0) * -26px));
}

.ky-badge-row { display: flex; justify-content: center; padding: 44px 0 0; }
.ky-badge {
	width: 64px; height: 64px; border-radius: 18px; background: #fff;
	box-shadow: 0 10px 22px -10px rgba(13,53,80,.45), 0 1px 3px rgba(13,53,80,.12);
	display: flex; align-items: center; justify-content: center;
}
.ky-badge svg { width: 27px; height: 27px; }

.ky-body { padding: 0 44px; }

.ky-h1 {
	margin: 26px 0 0; text-align: center;
	font: 800 27px/1.25 'Plus Jakarta Sans', sans-serif;
	color: var(--ky-navy-900); letter-spacing: -.02em;
}
.ky-sub {
	margin: 10px 0 26px; text-align: center;
	font: 400 14px/1.6 'Plus Jakarta Sans', sans-serif;
	color: var(--ky-navy-500); text-wrap: pretty;
}

/* ---------- fields ---------- */
.ky-card .form-group { margin: 0 0 11px; }
.ky-field { position: relative; }
.ky-field-icon {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	width: 17px; height: 17px; pointer-events: none;
	/* Declared before the input, so without an explicit stacking order the
	   input's opaque background paints over it (the eye icon escapes this
	   only because it is declared after the input). */
	z-index: 2;
}
.ky-input {
	width: 100%; box-sizing: border-box;
	/* frappe's .form-control sets a fixed Bootstrap-era height; with
	   border-box that swallows the padding and collapses the field to 34px. */
	height: auto;
	padding: 16px 16px 16px 44px;
	border: 1px solid rgba(16,40,58,.06);
	border-radius: 13px;
	font: 500 14px 'Plus Jakarta Sans', sans-serif;
	color: var(--ky-navy-900);
	background: #f1f4f7;
	outline: none;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.ky-input::placeholder { color: var(--ky-gray-400); }
.ky-input:focus {
	border-color: var(--ky-blue-500);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(69,166,220,.16);
}
.ky-input-pw { padding-right: 46px; }
.ky-eye {
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; cursor: pointer;
}

.ky-forgot-row { display: flex; justify-content: flex-end; margin: 12px 0 20px; }
.ky-forgot-row a,
.ky-foot-link a {
	font: 600 12.5px/1 'Plus Jakarta Sans', sans-serif;
	color: var(--ky-blue-300); text-decoration: none; white-space: nowrap;
}
.ky-forgot-row a:hover, .ky-foot-link a:hover { color: #1d6f9f; }

/* ---------- buttons ---------- */
.ky-btn {
	display: block; width: 100%; padding: 17px;
	border: 0; border-radius: 14px;
	background: linear-gradient(180deg, var(--ky-blue-400), var(--ky-blue-600));
	color: #fff;
	font: 700 15px 'Plus Jakarta Sans', sans-serif;
	cursor: pointer;
	box-shadow: 0 14px 28px -12px rgba(53,146,201,.85);
	transition: filter .15s;
}
.ky-btn:hover:not(:disabled) { filter: brightness(1.06); color: #fff; }
.ky-btn:disabled { opacity: .55; cursor: default; }
.ky-btn-outline {
	margin-top: 10px;
	background: #fff; color: var(--ky-navy-700);
	border: 1px solid rgba(16,40,58,.1); box-shadow: none;
}

/* ---------- divider + secondary actions ---------- */
.ky-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 16px; }
.ky-divider::before, .ky-divider::after {
	content: ""; height: 1px; flex: 1;
	background: repeating-linear-gradient(90deg, rgba(16,40,58,.22) 0 2px, transparent 2px 6px);
}
.ky-divider span {
	font: 500 12px/1 'Plus Jakarta Sans', sans-serif;
	color: var(--ky-gray-400); white-space: nowrap;
}

.ky-alt { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ky-alt-2 { grid-template-columns: 1fr 1fr; }
.ky-alt-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	padding: 14px; border: 1px solid rgba(16,40,58,.1); border-radius: 13px;
	background: #fff; color: var(--ky-navy-700);
	font: 600 13px 'Plus Jakarta Sans', sans-serif;
	cursor: pointer; white-space: nowrap; text-decoration: none;
	transition: border-color .15s, color .15s, box-shadow .15s;
}
.ky-alt-btn svg { width: 16px; height: 16px; flex: none; }
.ky-alt-btn:hover { border-color: var(--ky-blue-500); color: var(--ky-blue-500); box-shadow: 0 6px 16px -10px rgba(13,53,80,.5); }
.ky-alt-sso:hover { border-color: var(--ky-yellow-700); color: var(--ky-yellow-700); }

.ky-foot-link { margin: 20px 0 0; text-align: center; font: 400 12.5px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--ky-navy-500); }
.ky-resend { margin: 0 0 12px; text-align: center; font: 400 12.5px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--ky-navy-500); }

/* ---------- states ---------- */
.ky-banner {
	display: none;
	margin: 0 0 14px; padding: 11px 13px; border-radius: 11px;
	font: 500 12.5px/1.45 'Plus Jakarta Sans', sans-serif;
}
.ky-banner svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 7px; stroke: currentColor; fill: none; }
.ky-banner-error { background: #fdecec; color: #b4322c; border: 1px solid rgba(180,50,44,.14); }
.ky-banner-ok { background: #eaf7ef; color: #1f7a44; border: 1px solid rgba(31,122,68,.14); }

.field-error { display: none; margin: 7px 2px 0; font: 500 12px/1.4 'Plus Jakarta Sans', sans-serif; color: #b4322c; }
.form-group.invalid .field-error { display: block; }
.form-group.invalid .ky-input { border-color: #e0908b; background: #fff; }

@keyframes kyshake {
	0%,100% { transform: translateX(0); }
	20% { transform: translateX(-7px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(2px); }
}
.invalid-login { animation: kyshake .45s ease-in-out; }

.ky-footer {
	position: absolute; left: 0; right: 0; bottom: 22px; margin: 0;
	text-align: center;
	font: 400 11.5px/1 'Plus Jakarta Sans', sans-serif;
	color: #6f8b9d;
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
	.ky-logo-pill { left: 20px; top: 20px; }
	.ky-stage { padding: 96px 18px 64px; align-items: flex-start; }
	.ky-body { padding: 0 24px; }
	.ky-badge-row { padding: 32px 0 0; }
	.ky-h1 { font-size: 23px; }
	.ky-alt-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ky-cloud, .ky-puff { animation: none; }
	.ky-card, .ky-clouds, .ky-arcs, .ky-puff { transform: none !important; }
}