/* ==========================================================================
   Sign-in pages (student exam login, admin login). Shared so both look the same.
   ========================================================================== */
html, body { height: 100%; }
body {
	margin: 0;
	background: #f1f5f9;
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	color: #0f172a;
	-webkit-font-smoothing: antialiased;
}
.sl-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
	background:
		radial-gradient(900px 500px at 0% 0%, rgba(19, 28, 54, .10), transparent 60%),
		radial-gradient(700px 400px at 100% 100%, rgba(245, 179, 1, .12), transparent 60%),
		#f1f5f9;
}
.sl-card {
	width: 100%;
	max-width: 940px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #ffffff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 60px rgba(15, 23, 42, .12);
}
.sl-card *, .sl-card *::before, .sl-card *::after { box-sizing: border-box; }

/* Brand panel */
.sl-brand {
	position: relative;
	padding: 44px 40px;
	color: #ffffff;
	background:
		radial-gradient(600px 300px at 110% -10%, rgba(245, 179, 1, .35), transparent 60%),
		linear-gradient(150deg, #0f172a 0%, #1f2b4d 100%);
	display: flex;
	flex-direction: column;
}
.sl-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
}
.sl-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.sl-brand h1 { margin: 26px 0 8px; font-size: 28px; line-height: 1.2; font-weight: 700; }
.sl-brand h1 span { color: #fcd34d; }
.sl-brand > p { margin: 0; color: rgba(255, 255, 255, .75); font-size: 14.5px; line-height: 1.6; }
.sl-tips { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.sl-tips li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: rgba(255, 255, 255, .85); line-height: 1.5; }
.sl-tip-icon {
	flex-shrink: 0;
	width: 30px; height: 30px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .12);
	display: inline-flex; align-items: center; justify-content: center;
}
.sl-tip-icon svg { width: 16px; height: 16px; }
.sl-brand-foot { margin-top: auto; padding-top: 30px; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* Form panel */
.sl-form { padding: 44px 44px 36px; display: flex; flex-direction: column; justify-content: center; }
.sl-logo { height: 54px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 26px; }
.sl-form h2 { margin: 0; font-size: 24px; font-weight: 700; color: #0f172a; }
.sl-form .sl-lead { margin: 6px 0 26px; color: #64748b; font-size: 14px; }

.sl-alert {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 11px 14px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 13.5px;
	line-height: 1.45;
}
.sl-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.sl-field { margin-bottom: 16px; }
.sl-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #334155; }
.sl-input-wrap { position: relative; }
.sl-input-wrap > svg.sl-lead-icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: #94a3b8; pointer-events: none;
}
.sl-input {
	width: 100%;
	height: 48px !important;
	padding: 0 46px 0 44px !important;
	margin: 0 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 12px !important;
	background: #ffffff;
	font: inherit;
	font-size: 15px;
	color: #0f172a;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sl-input::placeholder { color: #94a3b8; }
.sl-input:focus { border-color: #131c36 !important; box-shadow: 0 0 0 4px rgba(19, 28, 54, .15); }
.sl-input-wrap:focus-within > svg.sl-lead-icon { color: #131c36; }
.sl-toggle {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px;
	border: 0; border-radius: 8px;
	background: transparent; color: #64748b;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.sl-toggle:hover { background: #f1f5f9; color: #0f172a; }
.sl-toggle svg { width: 18px; height: 18px; }

.sl-submit {
	width: 100%;
	height: 50px;
	margin-top: 8px;
	border: 0;
	border-radius: 12px;
	background: #131c36;
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	box-shadow: 0 8px 20px rgba(19, 28, 54, .28);
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sl-submit:hover { background: #1f2b4d; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(19, 28, 54, .32); }
.sl-submit:disabled { opacity: .75; cursor: progress; transform: none; }
.sl-spinner {
	display: none;
	width: 18px; height: 18px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: sl-spin .7s linear infinite;
}
.sl-submit.is-loading .sl-spinner { display: inline-block; }
@keyframes sl-spin { to { transform: rotate(360deg); } }

.sl-help { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: #94a3b8; }

@media (max-width: 820px) {
	.sl-card { grid-template-columns: 1fr; max-width: 460px; }
	.sl-brand { padding: 28px 28px 26px; }
	.sl-brand h1 { margin-top: 16px; font-size: 22px; }
	.sl-tips, .sl-brand-foot { display: none; }
	.sl-form { padding: 30px 26px 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-submit, .sl-input, .sl-spinner { transition: none; animation: none; }
}

/* Success variant of the alert (e.g. "Password changed successfully") */
.sl-alert.is-success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }

/* Admin variant of the brand panel: darker slate, amber accent */
.sl-brand.is-admin {
	background:
		radial-gradient(600px 300px at 110% -10%, rgba(245, 179, 1, .30), transparent 60%),
		linear-gradient(150deg, #020617 0%, #0f172a 55%, #1e293b 100%);
}
/* Admin sign-in: the left panel shows only the MIDS logo, centred on a white card. */
.sl-brand-logo { margin: auto 0; padding: 24px; background: #ffffff; border-radius: 16px; text-align: center; }
.sl-brand-logo img { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.sl-brand-logo + .sl-brand-foot { margin-top: 0; }
.sl-brand.is-admin .sl-chip-dot { background: #f5b301; box-shadow: 0 0 0 3px rgba(245, 179, 1, .25); }
.sl-switch { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: #94a3b8; }
.sl-switch strong { color: #64748b; font-weight: 600; }

/* ==========================================================================
   Animated MIDS theme (.sl-page.is-fancy) - candidate and admin sign-in.
   Same look as the home page: navy backdrop with drifting glows, dot grid and
   rising particles; card with a rotating glow border; round logo badge.
   ========================================================================== */
@property --sl-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sl-page.is-fancy {
	--sl-lime: #a6ce39;
	--sl-green: #0b6b3a;
	position: relative;
	overflow: hidden;
	background: radial-gradient(1200px 700px at 50% 110%, #0d2a3a 0%, #071226 60%);
}
.sl-fx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; will-change: transform; }
.sl-fx-orb.o1 { width: 520px; height: 520px; left: -160px; top: -180px; background: var(--sl-lime); animation: sl-drift1 18s ease-in-out infinite alternate; }
.sl-fx-orb.o2 { width: 460px; height: 460px; right: -140px; bottom: -180px; background: var(--sl-green); opacity: .7; animation: sl-drift2 22s ease-in-out infinite alternate; }
.sl-fx-orb.o3 { width: 320px; height: 320px; right: 20%; top: 6%; background: #1e88a8; opacity: .32; animation: sl-drift3 26s ease-in-out infinite alternate; }
@keyframes sl-drift1 { to { transform: translate(180px, 140px) scale(1.15); } }
@keyframes sl-drift2 { to { transform: translate(-200px, -120px) scale(1.1); } }
@keyframes sl-drift3 { to { transform: translate(-160px, 220px) scale(.9); } }
.sl-fx-grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
	        mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
	animation: sl-grid 40s linear infinite;
}
@keyframes sl-grid { to { background-position: 26px 26px; } }
.sl-fx-particles span {
	position: absolute; bottom: -20px; width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
	background: var(--sl-lime); box-shadow: 0 0 12px 2px rgba(166, 206, 57, .7);
	opacity: 0; animation: sl-rise linear infinite;
}
.sl-fx-particles span:nth-child(1) { left: 7%;  animation-duration: 13s; }
.sl-fx-particles span:nth-child(2) { left: 18%; animation-duration: 17s; animation-delay: 3s; }
.sl-fx-particles span:nth-child(3) { left: 33%; animation-duration: 11s; animation-delay: 6s; }
.sl-fx-particles span:nth-child(4) { left: 52%; animation-duration: 19s; animation-delay: 1s; width: 3px; height: 3px; }
.sl-fx-particles span:nth-child(5) { left: 66%; animation-duration: 14s; animation-delay: 8s; }
.sl-fx-particles span:nth-child(6) { left: 81%; animation-duration: 16s; animation-delay: 4s; background: #ffffff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .6); }
.sl-fx-particles span:nth-child(7) { left: 93%; animation-duration: 12s; animation-delay: 2s; width: 3px; height: 3px; }
@keyframes sl-rise {
	0%   { transform: translateY(0); opacity: 0; }
	10%  { opacity: .9; }
	50%  { transform: translateY(-55vh) translateX(16px); }
	90%  { opacity: .6; }
	100% { transform: translateY(-110vh) translateX(-10px); opacity: 0; }
}

/* Card: rotating glow border + entrance */
.sl-glow {
	position: relative; z-index: 1;
	width: 100%; max-width: 944px;
	padding: 2px; border-radius: 24px;
	background: conic-gradient(from var(--sl-angle), rgba(166,206,57,0) 0deg, var(--sl-lime) 70deg, rgba(166,206,57,0) 140deg, rgba(11,107,58,0) 200deg, #34d399 260deg, rgba(166,206,57,0) 330deg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(166, 206, 57, .16);
	animation: sl-turn 6s linear infinite, sl-enter .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sl-turn { to { --sl-angle: 360deg; } }
@keyframes sl-enter { from { opacity: 0; transform: translateY(30px) scale(.95); } to { opacity: 1; transform: none; } }
.is-fancy .sl-card { max-width: none; border-radius: 22px; box-shadow: none; }

/* Brand panel in MIDS greens */
.is-fancy .sl-brand,
.is-fancy .sl-brand.is-admin {
	align-items: center;
	background:
		radial-gradient(420px 300px at 100% 0%, rgba(166, 206, 57, .28), transparent 65%),
		radial-gradient(420px 320px at 0% 100%, rgba(52, 211, 153, .18), transparent 65%),
		linear-gradient(155deg, #06240f 0%, #0a3d22 45%, #0f172a 100%);
}
.is-fancy .sl-brand .sl-chip { align-self: center; margin-bottom: 30px; animation: sl-fade-up .7s .35s both; }
.is-fancy .sl-brand-foot { align-self: stretch; text-align: center; animation: sl-fade-up .7s .9s both; }

/* Round logo badge */
.is-fancy .sl-brand-logo {
	position: relative;
	width: 236px; height: 236px; padding: 0;
	margin: auto;
	border-radius: 50%;
	background: #ffffff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 8px rgba(255, 255, 255, .08);
	animation: sl-logo-in 1s .25s cubic-bezier(.2, .8, .2, 1) both, sl-float 6s 1.3s ease-in-out infinite;
}
.is-fancy .sl-brand-logo img { width: 74%; max-width: none; height: auto; margin: 0; }
.is-fancy .sl-brand-logo::before { /* rotating dashed ring */
	content: ""; position: absolute; inset: -16px; border-radius: 50%;
	border: 2px dashed rgba(166, 206, 57, .75);
	animation: sl-spin 22s linear infinite;
}
.is-fancy .sl-brand-logo::after { /* pulsing halo */
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(166, 206, 57, .55);
	animation: sl-halo 2.8s 1.4s ease-out infinite;
}
@keyframes sl-logo-in { from { opacity: 0; transform: scale(.6) rotate(-12deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sl-float { 50% { transform: translateY(-8px); } }
@keyframes sl-halo { 0% { box-shadow: 0 0 0 0 rgba(166, 206, 57, .55); } 70%, 100% { box-shadow: 0 0 0 26px rgba(166, 206, 57, 0); } }

/* Form: staggered entrance, green button with a light sweep */
@keyframes sl-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.is-fancy .sl-form > * { animation: sl-fade-up .7s cubic-bezier(.2, .8, .2, 1) both; }
.is-fancy .sl-form > *:nth-child(1) { animation-delay: .35s; }
.is-fancy .sl-form > *:nth-child(2) { animation-delay: .45s; }
.is-fancy .sl-form > *:nth-child(3) { animation-delay: .55s; }
.is-fancy .sl-form > *:nth-child(4) { animation-delay: .65s; }
.is-fancy .sl-form > *:nth-child(5) { animation-delay: .75s; }
.is-fancy .sl-form h2 {
	background: linear-gradient(90deg, #0b6b3a, #3f9d2f 55%, #7fb02a);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-fancy .sl-input:focus { border-color: #3f9d2f !important; box-shadow: 0 0 0 4px rgba(166, 206, 57, .25); }
.is-fancy .sl-input-wrap:focus-within > svg.sl-lead-icon { color: #3f9d2f; }
.is-fancy .sl-submit {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, #0b6b3a 0%, #12894b 55%, #a6ce39 130%);
	box-shadow: 0 12px 26px rgba(11, 107, 58, .35);
}
.is-fancy .sl-submit:hover { background: linear-gradient(135deg, #0a5f33 0%, #107a43 55%, #95bd2f 130%); box-shadow: 0 16px 32px rgba(11, 107, 58, .42); }
.is-fancy .sl-submit::before {
	content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
	transform: skewX(-20deg); animation: sl-shine 3.5s 1.8s ease-in-out infinite;
}
@keyframes sl-shine { 0% { left: -75%; } 40%, 100% { left: 130%; } }

@media (max-width: 820px) {
	.sl-glow { max-width: 464px; }
	.is-fancy .sl-brand { padding: 30px 24px 34px; }
	.is-fancy .sl-brand-logo { width: 176px; height: 176px; margin-top: 26px; }
	.is-fancy .sl-brand-logo::before { inset: -12px; }
	.sl-fx-orb { filter: blur(50px); }
}
@media (prefers-reduced-motion: reduce) {
	.is-fancy *, .is-fancy *::before, .is-fancy *::after { animation: none !important; }
	.sl-fx-particles { display: none; }
}