/* ============================================================================
   KanaanERP — Login Page Theme (v4)
   ----------------------------------------------------------------------------
   Split screen:
     • Form side  : calm light background, floating-label fields, toggle switch,
                    navy primary button with pointer-origin fill + loading /
                    success states driven by login.js status text.
     • Brand panel: bright brand blue with aurora blobs, moving grid floor,
                    pointer spotlight, orbiting module icons around the mark,
                    kinetic headline with a rotating word and mini bento tiles.

   Loaded only on /login (www/kanaan_login.html), on top of login.bundle.css.
   Everything is scoped under `.kanaan-login-page`. `!important` is used only
   where Frappe's login/bootstrap selectors would otherwise win.

   Sections
     0. Tokens          5. Inputs              10. Brand panel
     1. Shell           6. Remember / forgot   11. Orbit + headline
     2. Top bar         7. Buttons             12. Bento tiles
     3. Sections/card   8. Secondary sections  13. Responsive
     4. Card header     9. Footer              14. Reduced motion
============================================================================ */

@property --kl-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* 0. ------------------------------------------------------------- TOKENS -- */
.kanaan-login-page {
	--k-cyan: #29b6e0;
	--k-cyan-2: #9fe8ff;
	--k-primary: #1391c0;
	--k-navy: #0d2b46;
	--k-navy-2: #163f63;
	--k-mist: #f1f5f8;
	--k-ink: #13283b;
	--k-title: #0d2236;
	--k-muted: #6b7f91;
	--k-soft: #9aabb9;
	--k-line: #e1e8ee;
	--k-ok: #22b07d;
	--k-danger: #d9566b;
	--k-ease: cubic-bezier(.22, 1, .36, 1);
	--k-spring: cubic-bezier(.34, 1.45, .64, 1);
	--k-font: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Segoe UI Arabic", Arial, sans-serif;
}

/* 1. -------------------------------------------------------------- SHELL -- */
body:has(.kanaan-login-page) { overflow: hidden; background: #f1f5f8; }

.kanaan-login-page {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(440px, 1fr) 1.15fr;
	gap: 14px;
	padding: 14px;
	overflow: hidden auto;
	background: var(--k-mist);
	color: var(--k-ink);
	font-family: var(--k-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.kanaan-login-page *, .kanaan-login-page *::before, .kanaan-login-page *::after { box-sizing: border-box; }
.kanaan-login-page button, .kanaan-login-page input { font-family: inherit; }

.kl-auth {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px clamp(20px, 4vw, 56px) 12px;
}

/* 2. ------------------------------------------------------------ TOP BAR -- */
.kl-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.kl-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.kl-logo img { height: 36px; width: auto; }
.kl-logo b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--k-title); }
.kl-logo b span { color: var(--k-cyan); }

.kl-lang {
	position: relative;
	display: inline-flex;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--k-line);
	border-radius: 999px;
}
.kl-lang__thumb {
	position: absolute; top: 4px; bottom: 4px; left: 0;
	border-radius: 999px;
	background: var(--k-navy);
	box-shadow: 0 6px 14px -6px rgba(13, 43, 70, .6);
	transition: transform .55s var(--k-spring), width .55s var(--k-spring);
}
.kl-lang button {
	position: relative; z-index: 1;
	padding: 7px 14px;
	border: 0; border-radius: 999px; background: none;
	font-size: .86rem; font-weight: 600; color: var(--k-muted);
	cursor: pointer;
	transition: color .35s;
}
.kl-lang button:hover { color: var(--k-title); }
.kl-lang button[aria-pressed="true"] { color: #fff; }
.kl-lang button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 182, 224, .4); }

/* 3. ------------------------------------------------------ SECTIONS/CARD -- */
.kl-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 0; }

.kanaan-login-page section { width: 100%; max-width: 400px; margin: 0 auto; }
.kanaan-login-page .for-forgot,
.kanaan-login-page .for-login-with-email-link,
.kanaan-login-page .for-signup,
.kanaan-login-page .for-email-login { display: none; }

/* Neutralise Frappe's page-card box: the form sits directly on the page. */
.kanaan-login-page .login-content.page-card {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.kanaan-login-page .login-content.page-card form { max-width: 100% !important; margin: 0 !important; }
.kanaan-login-page .page-card-body { padding: 0 !important; }

/* Staggered entrance — replays every time a section is shown. */
.kl-card > * { animation: kl-rise .8s var(--k-ease) both; }
.kl-card > *:nth-child(1) { animation-delay: .15s; }
.kl-card > *:nth-child(2) { animation-delay: .22s; }
.kl-card > *:nth-child(3) { animation-delay: .29s; }
.kl-card > *:nth-child(4) { animation-delay: .36s; }
.kl-card > *:nth-child(5) { animation-delay: .43s; }
@keyframes kl-rise { from { opacity: 0; translate: 0 14px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: none; } }

.kl-card.kl-shake,
.kanaan-login-page .login-content.page-card.invalid-login { animation: kl-shake .5s var(--k-ease); }
@keyframes kl-shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }

/* 4. -------------------------------------------------------- CARD HEADER -- */
.kl-greet {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 14px !important;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	font-size: .82rem; font-weight: 700;
	color: var(--k-primary);
	background: #e6f5fb;
}
.kl-greet svg { animation: kl-spin 24s linear infinite; }
.kl-title {
	margin: 0 !important;
	font-size: 2.2rem !important;
	font-weight: 800 !important;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--k-title) !important;
}
.kl-lead { margin: 8px 0 28px !important; font-size: 1rem; line-height: 1.5; color: var(--k-muted); }

/* 5. ------------------------------------------------------------- INPUTS -- */
.kanaan-login-page .kl-field { position: relative; margin: 0 0 14px !important; }
.kanaan-login-page .kl-field .form-control {
	display: block;
	width: 100%;
	height: 58px !important;
	margin: 0 !important;
	padding: 22px 50px 6px 48px !important;
	font-size: 1rem !important;
	color: var(--k-ink) !important;
	background: #fff !important;
	border: 1.5px solid var(--k-line) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(13, 43, 70, .04) !important;
	transition: border-color .25s, box-shadow .25s;
}
.kanaan-login-page[dir="rtl"] .kl-field .form-control { padding: 22px 48px 6px 50px !important; }
.kanaan-login-page .kl-field .form-control:hover { border-color: #cfd9e2 !important; }
.kanaan-login-page .kl-field .form-control:focus {
	outline: none !important;
	border-color: var(--k-cyan) !important;
	box-shadow: 0 0 0 5px rgba(41, 182, 224, .14) !important;
}
/* RTL page: an email typed in Latin letters stays readable. */
.kanaan-login-page[dir="rtl"] .kl-field input[dir="auto"] { text-align: right; }

/* Floating label */
.kanaan-login-page .kl-field .form-label {
	position: absolute;
	inset-inline-start: 48px;
	top: 50%;
	translate: 0 -50%;
	margin: 0 !important;
	font-size: .98rem;
	font-weight: 400;
	color: var(--k-soft);
	pointer-events: none;
	white-space: nowrap;
	transition: top .25s var(--k-ease), font-size .25s var(--k-ease), color .25s, font-weight .25s;
}
.kanaan-login-page .kl-field .form-control:focus + .form-label,
.kanaan-login-page .kl-field .form-control:not(:placeholder-shown) + .form-label,
.kanaan-login-page .kl-field .form-control:-webkit-autofill + .form-label {
	top: 17px;
	font-size: .74rem;
	font-weight: 700;
	color: var(--k-primary);
}

.kanaan-login-page .kl-field .kl-ic {
	position: absolute;
	inset-inline-start: 16px;
	top: 50%;
	translate: 0 -50%;
	z-index: 1;
	color: var(--k-soft);
	pointer-events: none;
	transition: color .25s, scale .35s var(--k-spring);
}
.kanaan-login-page .kl-field:focus-within .kl-ic { color: var(--k-primary); scale: 1.12; }

/* Invalid (empty on submit, or login.js marks the body invalid) */
.kanaan-login-page .kl-field.is-invalid .form-control,
.kanaan-login-page .page-card-body.invalid .kl-field .form-control {
	border-color: var(--k-danger) !important;
	box-shadow: 0 0 0 5px rgba(217, 86, 107, .12) !important;
}
.kanaan-login-page .kl-field.is-invalid .form-label { color: var(--k-danger); }

/* Show / hide password — an eye icon; login.js still swaps the text. */
.kanaan-login-page .kl-field .toggle-password {
	position: absolute !important;
	left: auto; right: 8px;
	top: 50% !important;
	translate: 0 -50%;
	transform: none !important;
	z-index: 2;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 10px;
	font-size: 0 !important;
	color: var(--k-soft) !important;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.kanaan-login-page[dir="rtl"] .kl-field .toggle-password { left: 8px; right: auto; }
.kanaan-login-page .kl-field .toggle-password::before {
	content: "";
	width: 19px; height: 19px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kanaan-login-page .kl-field:has(input[type="text"]) .toggle-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}
.kanaan-login-page .kl-field .toggle-password:hover { background: var(--k-mist); color: var(--k-title) !important; }
.kanaan-login-page .kl-field .toggle-password:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 182, 224, .4); }

/* 6. ------------------------------------------------- REMEMBER / FORGOT -- */
.kl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 22px; font-size: .9rem; }
.kl-check { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; color: var(--k-ink); cursor: pointer; user-select: none; }
.kl-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.kl-tog { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: #d5dee5; transition: background .3s; }
.kl-tog::after {
	content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
	width: 16px; height: 16px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: translate .4s var(--k-spring);
}
.kl-check input:checked + .kl-tog { background: var(--k-cyan); }
.kl-check input:checked + .kl-tog::after { translate: 16px 0; }
.kanaan-login-page[dir="rtl"] .kl-check input:checked + .kl-tog::after { translate: -16px 0; }
.kl-check input:focus-visible + .kl-tog { box-shadow: 0 0 0 4px rgba(41, 182, 224, .3); }

.kanaan-login-page .kl-link,
.kanaan-login-page .sign-up-message a {
	color: var(--k-primary) !important;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .3s var(--k-ease), color .2s;
}
.kanaan-login-page[dir="rtl"] .kl-link,
.kanaan-login-page[dir="rtl"] .sign-up-message a { background-position: 100% 100%; }
.kanaan-login-page .kl-link:hover,
.kanaan-login-page .sign-up-message a:hover { background-size: 100% 1px; color: var(--k-navy) !important; }

/* 7. ------------------------------------------------------------ BUTTONS -- */
.kanaan-login-page .page-card-actions { margin: 0 !important; padding: 0 !important; }
.kl-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); scale: 0; animation: kl-ripple .6s ease-out forwards; pointer-events: none; }
@keyframes kl-ripple { to { scale: 4; opacity: 0; } }

.kanaan-login-page .btn-primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px !important;
	margin: 0 auto !important;
	padding: 0 18px !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: linear-gradient(100deg, #0a2138, var(--k-navy-2)) !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 14px 28px -14px rgba(13, 43, 70, .8) !important;
	transition: translate .35s var(--k-spring), box-shadow .35s, background .4s, border-radius .45s var(--k-ease), width .45s var(--k-ease);
}
/* Pointer-origin fill on hover */
.kanaan-login-page .btn-primary::before {
	content: ""; position: absolute; z-index: -1;
	width: 0; height: 0;
	left: var(--bx, 50%); top: var(--by, 50%);
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--k-cyan), var(--k-primary) 60%);
	transition: width .6s var(--k-ease), height .6s var(--k-ease);
}
.kanaan-login-page .btn-primary:hover::before { width: 240%; height: 560%; }
/* Arrow after the label */
.kanaan-login-page .btn-primary::after {
	content: ""; flex: none;
	width: 18px; height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate .35s var(--k-spring);
}
.kanaan-login-page[dir="rtl"] .btn-primary::after { scale: -1 1; }
.kanaan-login-page .btn-primary:hover { translate: 0 -2px; box-shadow: 0 20px 34px -14px rgba(19, 145, 192, .75) !important; }
.kanaan-login-page .btn-primary:hover::after { translate: 4px 0; }
.kanaan-login-page[dir="rtl"] .btn-primary:hover::after { translate: -4px 0; }
.kanaan-login-page .btn-primary:active { translate: 0 0; scale: .985; }
.kanaan-login-page .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 5px rgba(41, 182, 224, .35) !important; }

/* Loading ("Verifying..."): morph into a circle with a spinner */
.kanaan-login-page .btn-primary.is-loading {
	width: 56px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	pointer-events: none;
}
.kanaan-login-page .btn-primary.is-loading::before { width: 0 !important; }
.kanaan-login-page .btn-primary.is-loading::after {
	width: 22px; height: 22px;
	-webkit-mask: none; mask: none;
	background: none;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	animation: kl-spin .8s linear infinite;
}
/* Success: green with a check */
.kanaan-login-page .btn-primary.is-success {
	width: 56px !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important;
	background: var(--k-ok) !important;
	box-shadow: 0 14px 30px -12px rgba(34, 176, 125, .7) !important;
}
.kanaan-login-page .btn-primary.is-success::after {
	width: 24px; height: 24px; scale: 1;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* A status message from login.js (error / "Instructions Emailed") */
.kanaan-login-page .btn-primary.is-message { font-size: .95rem !important; }
.kanaan-login-page .btn-primary.is-message::before { width: 0 !important; }
.kanaan-login-page .btn-primary.is-message::after { display: none; }
.kanaan-login-page .login-content:has(.page-card-body.invalid) .btn-primary.is-message {
	background: linear-gradient(100deg, #b6455a, var(--k-danger)) !important;
	box-shadow: 0 14px 28px -14px rgba(217, 86, 107, .8) !important;
}

/* LDAP secondary button */
.kanaan-login-page .btn-ldap-login.btn-default {
	margin-top: 12px !important;
	height: 52px;
	color: var(--k-primary) !important;
	background: #e7f3f8 !important;
	border: 1.5px solid #cfe8f2 !important;
	border-radius: 14px !important;
}

/* "or" divider + option buttons (email link / social / Frappe Cloud) */
.kanaan-login-page .social-logins { margin-top: 0 !important; }
.kanaan-login-page .login-divider {
	display: flex; align-items: center; gap: 14px;
	margin: 20px 0 !important;
	font-size: .8rem; color: var(--k-soft) !important;
}
.kanaan-login-page .login-divider::before,
.kanaan-login-page .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--k-line); }
.kanaan-login-page .social-login-buttons { margin: 0 !important; }
.kanaan-login-page .social-login-buttons + .social-login-buttons { margin-top: 12px !important; }
.kanaan-login-page .login-button-wrapper { width: 100%; min-width: 100% !important; padding: 0 !important; margin: 0 0 12px !important; }
.kanaan-login-page .login-button-wrapper:last-child { margin-bottom: 0 !important; }
.kanaan-login-page .btn-login-option {
	position: relative; overflow: hidden;
	text-decoration: none !important;
	display: flex !important; align-items: center; justify-content: center; gap: 10px;
	height: 52px;
	padding: 0 16px !important;
	font-size: .98rem !important; font-weight: 700 !important;
	color: var(--k-title) !important;
	background: #fff !important;
	border: 1.5px solid var(--k-line) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	transition: border-color .25s, color .25s, translate .35s var(--k-spring);
}
.kanaan-login-page .btn-login-option:hover { border-color: var(--k-cyan) !important; color: var(--k-primary) !important; translate: 0 -1px; }
.kanaan-login-page .btn-login-option svg,
.kanaan-login-page .btn-login-option img { width: 18px; height: 18px; flex: none; margin: 0 !important; transition: translate .4s var(--k-spring), rotate .4s var(--k-spring); }
.kanaan-login-page .btn-login-option:hover svg { translate: 3px -3px; rotate: -8deg; }
.kanaan-login-page[dir="rtl"] .btn-login-with-email-link svg { scale: -1 1; }
.kanaan-login-page .btn-login-option .kl-ripple { background: rgba(41, 182, 224, .25); }

/* 8. -------------------------------------------------- SECONDARY SECTIONS -- */
.kanaan-login-page .kl-head { padding: 0 !important; margin: 0 !important; text-align: start !important; }
.kanaan-login-page .kl-head h4 {
	margin: 0 !important;
	font-size: 1.9rem !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	color: var(--k-title) !important;
}
.kanaan-login-page .kl-head + .kl-lead { margin-top: 8px !important; }
.kanaan-login-page .sign-up-message { margin: 18px 0 0 !important; font-size: .92rem; color: var(--k-muted); }

/* Sign-up form (Frappe markup) */
.kanaan-login-page .for-signup .form-control {
	height: 52px !important;
	padding: 0 16px !important;
	margin-bottom: 12px !important;
	background: #fff !important;
	border: 1.5px solid var(--k-line) !important;
	border-radius: 14px !important;
}
.kanaan-login-page .for-signup .form-control:focus { border-color: var(--k-cyan) !important; box-shadow: 0 0 0 5px rgba(41, 182, 224, .14) !important; }
.kanaan-login-page .indicator { font-weight: 600; }

/* OTP / 2FA screen injected by login.js */
.kanaan-login-page #twofactor_div .page-card-head { margin-bottom: 14px !important; text-align: start !important; }
.kanaan-login-page #twofactor_div .text-muted { color: var(--k-muted) !important; }
.kanaan-login-page #login_token {
	height: 58px !important;
	padding: 0 16px !important;
	text-align: center;
	letter-spacing: .35em;
	font-size: 1.2rem !important;
	font-weight: 700;
	background: #fff !important;
	border: 1.5px solid var(--k-line) !important;
	border-radius: 14px !important;
}
.kanaan-login-page #login_token:focus { border-color: var(--k-cyan) !important; box-shadow: 0 0 0 5px rgba(41, 182, 224, .14) !important; outline: none; }
.kanaan-login-page #twofactor_div .btn-primary { margin-top: 16px !important; }

/* 9. ------------------------------------------------------------- FOOTER -- */
.kl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .84rem; color: var(--k-muted); }
.kl-foot__secure { display: inline-flex; align-items: center; gap: 7px; }
.kl-foot__secure svg { color: var(--k-ok); }

/* 10. -------------------------------------------------------- BRAND PANEL -- */
.kl-brand {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 28px);
	min-height: calc(100dvh - 28px);
	padding: 30px 40px 26px;
	border-radius: 28px;
	color: #fff;
	background: radial-gradient(120% 90% at 20% 10%, #3d8fc4 0%, #22679a 45%, #17507e 100%);
	animation: kl-panel-in 1.1s .05s var(--k-ease) both;
}
@keyframes kl-panel-in { from { opacity: 0; scale: .98; } to { opacity: 1; scale: 1; } }
.kl-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; animation: kl-drift 22s var(--k-ease) infinite alternate; }
.kl-blob--1 { width: 60%; aspect-ratio: 1; top: -20%; left: -15%; background: #4cc3ea; opacity: .5; }
.kl-blob--2 { width: 45%; aspect-ratio: 1; bottom: -18%; right: 0; background: #29b6e0; opacity: .35; animation-duration: 26s; animation-delay: -6s; }
.kl-blob--3 { width: 38%; aspect-ratio: 1; top: 35%; right: -15%; background: #3f6fd1; opacity: .4; animation-duration: 30s; animation-delay: -12s; }
@keyframes kl-drift { 50% { translate: 8% 6%; scale: 1.15; } 100% { translate: -6% 10%; scale: .92; } }
.kl-floor {
	position: absolute; z-index: -1;
	left: -50%; right: -50%; bottom: -12%; height: 50%;
	background-image:
		linear-gradient(rgba(159, 232, 255, .16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 232, 255, .16) 1px, transparent 1px);
	background-size: 56px 56px;
	transform: perspective(520px) rotateX(62deg);
	transform-origin: bottom;
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	opacity: .6;
	animation: kl-floor 6s linear infinite;
}
@keyframes kl-floor { to { background-position: 0 56px, 0 0; } }
.kl-wm {
	position: absolute; z-index: -1;
	width: 58%; max-width: 520px;
	inset-inline-end: -12%; bottom: -20%;
	opacity: .07;
	filter: brightness(0) invert(1);
	pointer-events: none; user-select: none;
}
.kl-spot {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 60%) var(--my, 30%), rgba(255, 255, 255, .1), transparent 60%);
}

.kl-brand__top { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; color: rgba(230, 244, 252, .85); }
.kl-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px;
	font-size: .76rem; font-weight: 700; letter-spacing: .12em;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(159, 232, 255, .45);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}
.kl-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--k-cyan-2); animation: kl-ping 2s ease-out infinite; }
@keyframes kl-ping { 0% { box-shadow: 0 0 0 0 rgba(159, 232, 255, .7); } 100% { box-shadow: 0 0 0 10px rgba(159, 232, 255, 0); } }
.kl-site { display: inline-flex; align-items: center; gap: 7px; }

.kl-brand__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 0; }

/* 11. ---------------------------------------------------- ORBIT + HEADLINE -- */
.kl-orbit { position: relative; width: 200px; height: 200px; margin-bottom: 26px; }
.kl-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(159, 232, 255, .4); animation: kl-spin 40s linear infinite; }
.kl-orbit__ring--2 { inset: 30px; border-style: solid; border-color: rgba(255, 255, 255, .1); animation-duration: 60s; animation-direction: reverse; }
.kl-orbit__core {
	position: absolute; inset: 48px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(8, 32, 56, .75), rgba(11, 37, 64, .45) 60%, transparent 74%);
	box-shadow: 0 0 44px -8px rgba(41, 182, 224, .55);
}
.kl-orbit__core img { width: 74px; height: auto; animation: kl-reveal 1.4s .3s var(--k-ease) both, kl-breathe 5s 1.8s ease-in-out infinite; }
@keyframes kl-reveal { from { clip-path: inset(100% -60% -60% -60%); translate: 0 12px; } to { clip-path: inset(-60%); translate: 0 0; } }
@keyframes kl-breathe { 50% { scale: 1.05; filter: drop-shadow(0 0 18px rgba(41, 182, 224, .8)); } }
.kl-orbit__track { position: absolute; inset: 0; animation: kl-spin 28s linear infinite; }
.kl-sat {
	position: absolute; top: 50%; left: 50%;
	width: 40px; height: 40px; margin: -20px;
	display: grid; place-items: center;
	border-radius: 12px;
	color: var(--k-cyan-2);
	background: rgba(13, 43, 70, .7);
	border: 1px solid rgba(159, 232, 255, .35);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
	transform: rotate(var(--a)) translate(100px) rotate(calc(-1 * var(--a)));
}
.kl-sat svg { animation: kl-spin 28s linear infinite reverse; }
@keyframes kl-spin { to { rotate: 360deg; } }

.kl-headline {
	margin: 0 !important;
	max-width: 580px;
	font-size: clamp(2rem, 3.2vw, 3rem) !important;
	font-weight: 800 !important;
	line-height: 1.16 !important;
	letter-spacing: -.02em;
	color: #fff !important;
}
.kl-headline .kl-w { display: inline-block; animation: kl-word .9s var(--k-ease) both; animation-delay: calc(.6s + var(--i, 0) * .07s); }
@keyframes kl-word { from { opacity: 0; translate: 0 20px; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.kl-rotator {
	display: inline-block;
	background: linear-gradient(90deg, #d9f7ff, #8fe6ff 50%, #fff);
	background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	animation: kl-sheen 4s linear infinite;
}
.kl-rotator.kl-w { animation: kl-sheen 4s linear infinite, kl-word .9s var(--k-ease) both; animation-delay: 0s, calc(.6s + var(--i, 0) * .07s); }
.kl-rotator.is-out { animation: kl-sheen 4s linear infinite, kl-rot-out .38s var(--k-ease) forwards; }
.kl-rotator.is-in { animation: kl-sheen 4s linear infinite, kl-rot-in .55s var(--k-ease) forwards; }
@keyframes kl-sheen { to { background-position: -200% 0; } }
@keyframes kl-rot-out { to { opacity: 0; translate: 0 -60%; filter: blur(8px); } }
@keyframes kl-rot-in { from { opacity: 0; translate: 0 60%; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.kl-sub { margin: 14px 0 0 !important; max-width: 470px; font-size: 1.04rem; line-height: 1.6; color: rgba(225, 240, 250, .85); animation: kl-rise 1s 1.3s var(--k-ease) both; }

/* 12. -------------------------------------------------------- BENTO TILES -- */
.kl-bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; width: 100%; max-width: 580px; margin-top: 28px; text-align: start; }
.kl-tile {
	position: relative; overflow: hidden;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(10px);
	animation: kl-rise .9s var(--k-ease) both;
	animation-delay: calc(1.5s + var(--i, 0) * .12s);
	transition: border-color .3s, translate .4s var(--k-ease);
}
.kl-tile::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(200px circle at var(--tx, 50%) var(--ty, 50%), rgba(255, 255, 255, .16), transparent 60%);
	opacity: 0; transition: opacity .3s;
}
.kl-tile:hover { border-color: rgba(159, 232, 255, .5); translate: 0 -3px; }
.kl-tile:hover::before { opacity: 1; }
.kl-tile small { display: block; font-size: .78rem; color: rgba(225, 240, 250, .75); }
.kl-tile strong { display: block; margin-top: 2px; font-size: .95rem; font-weight: 700; }
.kl-spark { display: block; width: 100%; height: 32px; margin-top: 8px; }
.kl-spark__line { fill: none; stroke: var(--k-cyan-2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: kl-draw 2.2s 1.9s var(--k-ease) forwards; }
.kl-spark__area { fill: url(#kl-sg); opacity: 0; animation: kl-fade 1s 2.8s forwards; }
.kl-spark circle { fill: #fff; opacity: 0; animation: kl-fade .4s 3.8s forwards, kl-ping 2s 3.8s ease-out infinite; }
@keyframes kl-draw { to { stroke-dashoffset: 0; } }
@keyframes kl-fade { to { opacity: 1; } }
.kl-langs { display: flex; gap: 6px; margin-top: 10px; }
.kl-langs span { padding: 3px 8px; border-radius: 7px; font-size: .78rem; font-weight: 700; background: rgba(255, 255, 255, .14); animation: kl-bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes kl-bob { 50% { translate: 0 -3px; } }
.kl-shield { margin-top: 8px; color: #7ff0c4; }
.kl-shield svg { animation: kl-breathe 3s ease-in-out infinite; }

.kl-brand__foot {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	font-size: .95rem; font-weight: 600; letter-spacing: .04em;
	color: rgba(230, 244, 252, .75);
}
.kl-brand__foot::before, .kl-brand__foot::after { content: ""; width: 38px; height: 1px; background: rgba(159, 232, 255, .5); }

/* 13. --------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 1100px) {
	.kanaan-login-page { grid-template-columns: 1fr 1fr; }
	.kl-bento { display: none; }
}
@media (max-width: 860px) {
	.kanaan-login-page { grid-template-columns: 1fr; align-content: start; padding: 0; gap: 0; }
	.kl-brand { order: -1; min-height: 0; border-radius: 0 0 26px 26px; padding: 16px 18px 26px; }
	.kl-site, .kl-sub, .kl-brand__foot { display: none; }
	.kl-brand__center { padding: 12px 0 0; }
	.kl-orbit { width: 140px; height: 140px; margin-bottom: 14px; }
	.kl-orbit__core { inset: 34px; }
	.kl-orbit__core img { width: 52px; }
	.kl-sat { width: 30px; height: 30px; margin: -15px; transform: rotate(var(--a)) translate(70px) rotate(calc(-1 * var(--a))); }
	.kl-sat svg { width: 14px; height: 14px; }
	.kl-headline { font-size: 1.5rem !important; }
	.kl-auth { padding: 16px 20px 22px; }
	.kl-top { justify-content: center; }
	.kl-top .kl-logo { display: none; }
	.kl-main { padding: 22px 0 26px; }
	.kl-title { font-size: 1.85rem !important; }
	.kl-foot { flex-direction: column; }
}

/* 14. ----------------------------------------------------- REDUCED MOTION -- */
@media (prefers-reduced-motion: reduce) {
	.kanaan-login-page *, .kanaan-login-page *::before, .kanaan-login-page *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}