/* ==========================================================
   SADA FRAMEWORK LOGIN
   Version 2.0
========================================================== */

:root{

	--gold:#D4AF37;
	--gold-dark:#C49A18;

	--black:var(--color-black);
	--text:var(--color-text);
	--gray:var(--color-text-muted);

	--background:#FAFAF8;

	--white:#FFFFFF;

	--border:#EAEAEA;

	--radius:28px;

	--shadow:

		0 20px 60px rgba(0,0,0,.08);

	--transition:.30s ease;

}

*{

	margin:0;

	padding:0;

	box-sizing:border-box;

}

html{

	scroll-behavior:smooth;

}

body{

	font-family:var(--font-family);

	background:var(--background);

	color:var(--text);

	min-height:100vh;

}

.auth-page{

	min-height:100vh;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:40px;

}

.login-setup-link{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
margin:16px 0 0;
padding:10px;
border:0;
background:transparent;
color:var(--gold-dark);
font:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.login-setup-link:hover,
.login-setup-link:focus-visible{
color:var(--gold);
text-decoration:underline;
}

.license-setup-panel{
position:fixed;
inset:0;
z-index:100;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(12,12,12,.56);
backdrop-filter:blur(8px);
}

.license-setup-panel[hidden]{display:none}

.license-setup-card{
position:relative;
width:min(100%,520px);
max-height:min(92vh,760px);
overflow:auto;
padding:32px;
border:1px solid color-mix(in srgb,var(--color-gold) 28%,transparent);
border-radius:24px;
background:var(--color-surface,#fff);
color:var(--color-text,#17130a);
box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.license-setup-card h2{margin:0 0 10px}
.license-setup-card>p{margin:0 0 20px;color:var(--color-text-muted,#6b7280);line-height:1.5}
.license-setup-card label{display:block;margin:12px 0 6px;font-size:12px;font-weight:800}
.license-setup-card input,
.license-setup-card textarea{width:100%;padding:11px 12px;border:1px solid var(--color-border,#ddd);border-radius:10px;background:var(--color-surface-light,#fafafa);color:var(--color-text,#17130a);font:inherit}
.license-setup-card textarea{resize:vertical}
.license-setup-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.license-setup-close:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.license-setup-message{margin:12px 0 0;color:var(--color-text-muted,#6b7280);font-size:12px}
.license-setup-message[data-state="error"]{color:#b42318}
.license-setup-message[data-state="success"]{color:#18864b}

.password-change-panel{
	position:fixed;
	inset:0;
	z-index:50;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(18,18,18,.42);
	backdrop-filter:blur(8px);
}

.password-change-panel[hidden]{
	display:none;
}

.password-change-card{
	width:min(100%,460px);
	padding:34px;
	border:1px solid color-mix(in srgb,var(--color-gold) 28%,transparent);
	border-radius:24px;
	background:#fff;
	box-shadow:0 24px 70px rgba(0,0,0,.20);
}

.password-change-icon{
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	margin-bottom:18px;
	border-radius:14px;
	color:#8c6f12;
	background:#fbf5df;
	font-size:20px;
}

.password-change-card h2{
	margin:0 0 10px;
	color:#171717;
	font-size:26px;
}

.password-change-card > p{
	margin:0 0 24px;
	color:#666;
	font-size:14px;
	line-height:1.55;
}

.password-change-card label{
	display:block;
	margin:16px 0 7px;
	color:#2a2a2a;
	font-size:13px;
	font-weight:700;
}

.password-change-card input{
	width:100%;
	padding:13px 14px;
	border:1px solid #dedede;
	border-radius:12px;
	color:#222;
	background:#fff;
	font:inherit;
	outline:none;
}

.password-change-username{
	position:absolute;
	width:1px !important;
	height:1px;
	padding:0 !important;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0 !important;
}

.password-change-card input:focus{
	border-color:var(--gold);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--color-gold) 16%,transparent);
}

.password-change-error{
	margin:14px 0 0 !important;
	color:#b42318 !important;
	font-size:13px !important;
}

.password-change-card .login-button{
	width:100%;
	margin-top:22px;
}

.password-recovery-panel{
margin-top:18px;
padding:18px;
border:1px solid var(--login-border,rgba(127,127,127,.25));
border-radius:16px;
background:var(--login-surface-raised,#222);
color:var(--login-ink,#F7F4EC);
}

.password-recovery-title{
margin:0 0 6px;
color:var(--login-ink,#F7F4EC);
font-size:18px;
}

.password-recovery-intro{
margin:0 0 14px;
color:var(--login-muted,#A9A294);
font-size:13px;
line-height:1.5;
}

.password-recovery-label{
display:block;
margin:0 0 6px;
color:var(--login-ink,#F7F4EC);
font-size:12px;
font-weight:700;
}

.password-recovery-input{
display:block;
width:100%;
min-height:46px;
margin:0 0 12px;
padding:12px 13px;
box-sizing:border-box;
border:1px solid var(--login-border,#3A3A3A);
border-radius:12px;
background:var(--login-surface,#171717);
color:var(--login-ink,#F7F4EC);
font:inherit;
outline:none;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.password-recovery-input::placeholder{
color:var(--login-muted,#A9A294);
}

.password-recovery-input:hover{
border-color:color-mix(in srgb,var(--sada-accent-solid,#D4AF37) 42%,var(--login-border,#3A3A3A));
}

.password-recovery-input:focus{
border-color:var(--sada-accent-solid,#D4AF37);
box-shadow:0 0 0 3px color-mix(in srgb,var(--sada-accent-solid,#D4AF37) 18%,transparent);
}

.password-recovery-button{
width:100%;
margin-top:2px;
}

.password-recovery-reset-form{
margin-top:14px;
padding-top:14px;
border-top:1px solid var(--login-border,#3A3A3A);
}

.password-recovery-message{
margin:12px 0 0;
font-size:13px;
line-height:1.5;
}

.password-recovery-message[data-state="error"]{
color:#FCA5A5;
}

.password-recovery-message[data-state="success"]{
color:#86EFAC;
}

@media(max-width:600px){
	.password-change-card{
		padding:26px 22px;
	}
}

.auth-shell{

	width:100%;

	max-width:1600px;

	background:#FFFFFF;

	border-radius:36px;

	overflow:hidden;

	box-shadow:

		0 30px 80px rgba(0,0,0,.08);

	display:grid;

	grid-template-columns:1.05fr .95fr;

}







/* ==========================================================
   LEFT PANEL
========================================================== */

.brand-panel{

	position:relative;

	background:#ffffff;

	padding:70px;

	display:flex;

	align-items:center;

	overflow:hidden;

}

.brand-content{
	width:100%;
	max-width:560px;
	margin:auto;
	margin-left:50px;
}







/* ==========================================================
   OFFICIAL RWANDA IDENTITY
========================================================== */

.rwanda-pattern{

	position:absolute;

	top:0;

	left:0;

	width:82px;

	height:100%;

	border-right:1px solid #E8E3D9;

	background:#FFFFFF;

	background-image:url("../assets/framework/rwanda-pattern.svg");

	background-repeat:repeat-y;

	background-position:center;

	background-size:58px;

}







/* ==========================================
   SADA LOGO
========================================== */

.brand-logo{
	margin-bottom:18px;
}

.logo-image{
	display:block;
	width:82px;
	height:82px;
	border-radius:50%;
	aspect-ratio:1;
	object-fit:contain;
	padding:7px;
	box-sizing:border-box;
	background:#FFFFFF;
}

.login-logo{
	margin-bottom:16px;
}

.login-logo-image{
	display:block;
	width:56px;
	height:56px;
	margin:auto;
	border-radius:50%;
	aspect-ratio:1;
	object-fit:contain;
	padding:5px;
	box-sizing:border-box;
	background:#FFFFFF;
}




/* ==========================================
   BRAND NAME
========================================== */

.brand-name{

	margin-top:6px;

}

.brand-name h1{

	font-size:76px;

	font-weight:900;

	line-height:.92;

	letter-spacing:-2px;

	color:var(--color-black);

	text-transform:uppercase;

	margin:0;

}

.brand-tagline{

	margin-top:10px;

	font-size:20px;

	font-weight:700;

	letter-spacing:3px;

	color:#C99A14;

}





/* ==========================================================
   HERO
========================================================== */

.hero-text{
	margin-top:34px;
}

.hero-text h2{

	font-size:64px;
	
	line-height:1.02;

	font-weight:900;

	color:var(--color-black);

}

.hero-text h2 span{

	color:var(--gold);

}

.hero-text p{
	margin-top:24px;
	font-size:17px;
	line-height:1.9;
	max-width:510px;
}

.hero-divider{

	width:120px;

	height:5px;

	background:var(--gold);

	margin:60px 0;

	border-radius:50px;

}







/* ==========================================================
   FOOTER
========================================================== */

.brand-footer{

	display:flex;

	flex-direction:column;

	gap:22px;

}

.footer-item{

	display:flex;

	align-items:center;

	gap:18px;

	font-size:16px;

	color:var(--color-text);

}

.footer-item i{

	color:var(--gold);

	width:22px;

	font-size:18px;

}



.brand-tagline{

	margin-top:8px;

	font-size:18px;

	font-weight:700;

	letter-spacing:4px;

	color:#C99A14;

}

.gold-title{

	background:linear-gradient(
		180deg,
		#FFF0A0 0%,
		#FFD95C 20%,
		#F3C43B 45%,
		#D9A117 70%,
		#B77A00 100%
	);

	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;

	background-clip:text;

	color:transparent;

}



/* ==========================================================
   LOGIN PANEL
========================================================== */

.login-panel{

   background:#F7F6F3;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:70px;

}

.login-card{

	width:100%;

	max-width:560px;

	background:#FFFFFF;

	border-radius:28px;

	padding:60px;

	box-shadow:0 30px 90px rgba(0,0,0,.09);

	border:1px solid var(--border);

	animation:cardFade .7s ease;

}







/* ==========================================================
   LOGIN LOGO
========================================================== */

.login-logo{

	text-align:center;

	margin-bottom:10px;

}

.login-logo-image{

	width:80px;

	height:auto;

	display:block;

	margin:auto;

}







/* ==========================================================
   HEADER
========================================================== */

.login-header{

	text-align:center;

	margin-bottom:28px;

}

.login-header h2{

	font-size:38px;

	color:var(--color-black);

	font-weight:800;

	margin-bottom:10px;

}

.login-header p{

	color:var(--color-text-light);

	font-size:16px;

	line-height:1.7;

}







/* ==========================================================
   FORM
========================================================== */

.login-form{

	display:flex;

	flex-direction:column;

	gap:28px;

}

.form-group{

	display:flex;

	flex-direction:column;

	gap:12px;

	opacity:1;

	transform:none;

	animation:none;

}

.form-group:nth-child(1){

	animation-delay:.05s;

}

.form-group:nth-child(2){

	animation-delay:.10s;

}

.login-options{

	opacity:1;

	transform:none;

	animation:none;

}

.login-button{

	opacity:1;

	transform:none;

	animation:none;

}

.login-divider{

	opacity:0;

	animation:fadeIn .5s 1.35s forwards;

}

.login-security{

	opacity:0;

	animation:fadeIn .5s 1.45s forwards;

}

.login-footer{

	opacity:0;

	animation:fadeIn .5s 1.55s forwards;

}

@keyframes fieldReveal{

	from{

		opacity:0;

		transform:translateY(25px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

@keyframes fadeIn{

	from{

		opacity:0;

	}

	to{

		opacity:1;

	}

}

.form-group label{

	color:var(--color-text);

	font-size:15px;

	font-weight:700;

}







/* ==========================================================
   INPUTS
========================================================== */

.input-wrapper{

	position:relative;

	display:flex;

	align-items:center;

}

.input-wrapper i:first-child{

	position:absolute;

	left:20px;

	color:var(--color-text-muted);

}

.input-wrapper input{

	width:100%;

	height:60px;

	padding-left:55px;

	padding-right:55px;

	border:1px solid var(--border);

	border-radius:18px;

	background:#FFFFFF;

	color:var(--color-black);

	font-size:16px;

	transition:.3s;

}

.input-wrapper input::placeholder{

	color:#A0A0A0;

}

.input-wrapper input:hover{

	border-color:#D7D7D7;

}

.input-wrapper input:focus{

	border-color:var(--gold);

	box-shadow:

		0 0 0 4px color-mix(in srgb,var(--color-gold) 15%,transparent);

}







/* ==========================================================
   PASSWORD BUTTON
========================================================== */

.password-toggle{

	position:absolute;

	right:18px;

	top:50%;

	transform:translateY(-50%);

	width:40px;

	height:40px;

	display:flex;

	align-items:center;

	justify-content:center;

	background:transparent;

	border:none;

	color:var(--color-text-muted);

	cursor:pointer;

}

.password-toggle:hover{

	color:var(--gold);

}







/* ==========================================================
   OPTIONS
========================================================== */

.login-options{

	display:flex;

	justify-content:space-between;

	align-items:center;

	font-size:14px;

}

.remember-me{

	display:flex;

	align-items:center;

	gap:10px;

	cursor:pointer;

	color:var(--color-text);

}

.remember-me input{

	accent-color:var(--gold);

}

.forgot-password{

	color:var(--gold);

	font-weight:600;

}

.forgot-password:hover{

	color:var(--color-black);

}







/* ==========================================================
   BUTTON
========================================================== */

.login-button{

	width:100%;

	height:62px;

	border:none;

	border-radius:18px;

	background:var(--sada-accent-solid,var(--gold));

	color:var(--sada-accent-contrast,#17130A);

	font-size:17px;

	font-weight:700;

	display:flex;

	align-items:center;

	justify-content:center;

	gap:12px;

	cursor:pointer;

	position:relative;

	overflow:hidden;

	transition:

		transform .25s,

		background var(--transition-normal);

}

.login-button:hover{

	transform:translateY(-3px);

	background:var(--sada-accent-dark,var(--gold-dark));

}

.login-button:active{

	transform:scale(.985);

}

.login-button:disabled{

	cursor:wait;

	opacity:.92;

}

.login-button::before{

	display:none;

}

.login-button:hover::before{

	display:none;

}







/* ==========================================================
   DIVIDER
========================================================== */

.login-divider{

	margin:35px 0;

	text-align:center;

	position:relative;

}

.login-divider::before{

	content:"";

	position:absolute;

	left:0;

	right:0;

	top:50%;

	height:1px;

	background:var(--border);

}

.login-divider span{

	position:relative;

	background:var(--white);

	padding:0 20px;

	color:var(--color-text-muted);

	font-size:13px;

}







/* ==========================================================
   SECURITY
========================================================== */

.login-security{

	display:flex;

	justify-content:center;

	margin-bottom:30px;

}

.security-item{

	display:flex;

	align-items:center;

	gap:12px;

	color:var(--color-text-muted);

	font-size:14px;

}

.security-item i{

	color:var(--gold);

}







/* ==========================================================
   FOOTER
========================================================== */

.login-footer{

	text-align:center;

	color:var(--color-text-muted);

	font-size:13px;

}







/* ==========================================================
   ANIMATION
========================================================== */

@keyframes cardFade{

	from{

		opacity:0;

		transform:

			translateY(40px)

			scale(.96);

	}

	to{

		opacity:1;

		transform:

			translateY(0)

			scale(1);

	}

}


/* ==========================================================
   SADA LOGIN V2
   FINAL POLISH
========================================================== */


/* ==========================================================
   HOVER EFFECTS
========================================================== */

.brand-logo{

	transition:.45s ease;

	animation:

		logoReveal

		1s

		.2s

		both;

}

@keyframes logoReveal{

	from{

		opacity:0;

		transform:

			translateY(-20px)

			scale(.8)

			rotate(-10deg);

	}

	to{

		opacity:1;

		transform:

			translateY(0)

			scale(1)

			rotate(0);

	}

}

.brand-logo:hover{

	transform:translateY(-4px);

}

.logo-image{

	transition:.45s ease;

}

.logo-image:hover{

	transform:scale(1.03);

}





.brand-name h1{

	transition:.35s ease;

}

.brand-name h1:hover{

	transform:translateX(3px);

}

.hero-text h2{

	transition:.35s ease;

}

.hero-text h2 span{

	transition:.35s ease;

}

.hero-text:hover span{

	color:#C79B24;

}



/* ==========================================================
   LOGIN CARD
========================================================== */

.login-card{

	transition:

		transform .45s,

		box-shadow .45s;

}

.login-card:hover{

	transform:translateY(-8px);

	box-shadow:

		0 35px 90px rgba(0,0,0,.12);

}





/* ==========================================================
   INPUT ANIMATION
========================================================== */

.input-wrapper{

	transition:

		transform .3s,

		box-shadow .3s,

		border-color .3s;

}

.input-wrapper:focus-within{

	transform:translateY(-2px);

}





/* ==========================================================
   CUSTOM CHECKBOX
========================================================== */

.remember-me{

	user-select:none;

}

.remember-me input{

	width:18px;

	height:18px;

	cursor:pointer;

}





/* ==========================================================
   BUTTON
========================================================== */

.login-button{

	position:relative;

	overflow:hidden;

	background:var(--sada-accent-solid,var(--gold)) !important;
	color:var(--sada-accent-contrast,#17130A) !important;
	box-shadow:none !important;
	background-image:none !important;

}

.login-button::before{

	display:none !important;

}

.login-button:hover::before{

	display:none !important;

}

.login-button:hover,
.login-button:focus-visible,
.login-button:active{
	background:var(--sada-accent-dark,var(--gold-dark)) !important;
	color:var(--sada-accent-contrast,#17130A) !important;
	box-shadow:none !important;
}

.login-button:active{

	transform:scale(.985);

}





/* ==========================================================
   LOADING OVERLAY
========================================================== */

.auth-loading-overlay{

	position:fixed;

	inset:0;

	display:flex;

	align-items:center;

	justify-content:center;

	background:rgba(255,255,255,.75);

	backdrop-filter:blur(12px);

	z-index:9999;

}

.loading-card{

	width:340px;

	background:#FFF;

	border-radius:26px;

	padding:40px;

	text-align:center;

	box-shadow:

		0 30px 80px rgba(0,0,0,.12);

}

.loading-spinner{

	width:58px;

	height:58px;

	margin:auto auto 25px;

	border-radius:50%;

	border:4px solid #EEE;

	border-top:4px solid var(--gold);

	animation:spin 1s linear infinite;

}

.loading-card h3{

	color:var(--color-black);

	margin-bottom:12px;

}

.loading-card p{

	color:var(--color-text-light);

	line-height:1.7;

}

@keyframes spin{

	to{

		transform:rotate(360deg);

	}

}



.auth-loading-overlay{

	opacity:0;

	visibility:hidden;

	pointer-events:none;

	transition:var(--transition-normal);

}

.auth-loading-overlay.active{

	opacity:1;

	visibility:visible;

	pointer-events:all;

}




/* ==========================================================
   TOAST
========================================================== */

.auth-message{

	position:fixed;

	top:35px;

	right:35px;

	min-width:340px;

	padding:18px 24px;

	border-radius:18px;

	color:#FFF;

	font-weight:600;

	box-shadow:

		0 25px 60px rgba(0,0,0,.18);

	animation:toastIn .35s ease;

	z-index:99999;

}

.auth-message.success{

	background:#18A058;

}

.auth-message.error{

	background:#E5484D;

}

@keyframes toastIn{

	from{

		opacity:0;

		transform:

			translateY(-15px);

	}

	to{

		opacity:1;

		transform:

			translateY(0);

	}

}

/* Keep the authentication page in the persisted appearance too. It is a
   separate static page, so it cannot inherit the admin theme stylesheet. */
:root[data-sada-theme="dark"] {
	--background:#0B0B0B;
	--white:#171717;
	--border:#37332A;
	--text:#F7F4EC;
	--gray:#A9A294;
}

:root[data-sada-theme="dark"] body,
:root[data-sada-theme="dark"] .auth-shell,
:root[data-sada-theme="dark"] .brand-panel,
:root[data-sada-theme="dark"] .login-panel,
:root[data-sada-theme="dark"] .login-card,
:root[data-sada-theme="dark"] .password-change-card,
:root[data-sada-theme="dark"] .loading-card {
	background:var(--white) !important;
	color:var(--text) !important;
	border-color:var(--border) !important;
}

:root[data-sada-theme="dark"] .auth-body,
:root[data-sada-theme="dark"] .auth-page {
	background:var(--background) !important;
	color:var(--text) !important;
}

:root[data-sada-theme="dark"] .login-card input,
:root[data-sada-theme="dark"] .password-change-card input {
	background:#222222 !important;
	color:var(--text) !important;
	border-color:var(--border) !important;
}

:root[data-sada-theme="dark"] .login-divider span {
	background:var(--white) !important;
	color:#d8d2c7 !important;
}

:root[data-sada-theme="dark"] .login-card label,
:root[data-sada-theme="dark"] .login-card h1,
:root[data-sada-theme="dark"] .login-card h2,
:root[data-sada-theme="dark"] .login-card p,
:root[data-sada-theme="dark"] .login-card span,
:root[data-sada-theme="dark"] .password-change-card h2,
:root[data-sada-theme="dark"] .password-change-card p,
:root[data-sada-theme="dark"] .password-change-card label {
	color:var(--text) !important;
}




/* ==========================================================
   SUBTLE RWANDAN BACKGROUND
========================================================== */

.brand-panel::after{

	content:"";

	position:absolute;

	right:-160px;

	bottom:-160px;

	width:520px;

	height:520px;

	opacity:.018;

	background-image:url("../assets/framework/rwanda-pattern.svg");

	background-size:220px;

	background-repeat:repeat;

	transform:rotate(-12deg);

}





/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

	.auth-shell{
	
		grid-template-columns:1.15fr .85fr;
	
	}

	.brand-panel{

		padding:60px;

	}

	.login-panel{

		padding:60px;

	}

}

@media (max-width:768px){

	.auth-page{

		padding:20px;

	}

	.brand-panel{

		padding:40px;

	}

	.login-panel{

		padding:30px;

	}

	.brand-name h1{

		font-size:56px;

	}

	.hero-text h2{

		font-size:46px;

	}

	.login-card{

		padding:35px;

	}

}

@media (max-width:500px){

	.brand-name h1{

		font-size:44px;

	}

	.brand-name span{
	
		letter-spacing:6px;
	
	}

	.hero-text h2{

		font-size:36px;

	}

	.login-card{

		padding:28px;

	}

}





/* ==========================================
   PREMIUM PAGE INTRO
========================================== */

.brand-content{

	opacity:0;

	transform:translateX(-60px);

	animation:brandIntro 1.1s cubic-bezier(.18,.9,.25,1) forwards;

}

.login-card{

	opacity:0;

	transform:translateX(60px) scale(.96);

	animation:loginIntro 1s .18s cubic-bezier(.18,.9,.25,1) forwards;

}

@keyframes brandIntro{

	0%{

		opacity:0;

		transform:
			translateX(-60px)
			scale(.96);

	}

	60%{

		opacity:1;

	}

	100%{

		opacity:1;

		transform:
			translateX(0)
			scale(1);

	}

}

/* Mobile is a focused sign-in surface. Keeping the desktop brand panel in the
   two-column grid made the form wider than the viewport and clipped controls. */
@media (max-width:768px){
	.auth-page{
		padding:0;
	}

	.auth-shell{
		display:block;
		min-height:100vh;
		border-radius:0;
	}

	.brand-panel{
		display:none;
	}

	.login-panel{
		width:100%;
		min-height:100vh;
		padding:24px;
	}

	.login-card{
		width:100%;
		max-width:480px;
		padding:36px 28px;
		transform:none;
	}
}

@media (max-width:380px){
	.login-panel{
		padding:14px;
	}

	.login-card{
		padding:30px 20px;
	}
}

@keyframes loginIntro{

	0%{

		opacity:0;

		transform:
			translateX(60px)
			scale(.94);

	}

	100%{

		opacity:1;

		transform:
			translateX(0)
			scale(1);

	}

}


.auth-shell{

	animation:

		shellAppear

		1.1s

		cubic-bezier(.18,.9,.25,1);

}

@keyframes shellAppear{

	from{

		opacity:0;

		transform:

			translateY(40px)

			scale(.985);

	}

	to{

		opacity:1;

		transform:

			translateY(0)

			scale(1);

	}

}

/*
   Keep authentication entry stable. The former multi-stage transforms made
   the form appear to shake as the shell, card, and fields settled at once.
   Authentication should present immediately, then navigate directly after a
   successful sign-in.
*/
.auth-shell,
.brand-content,
.login-card,
.login-divider,
.login-security,
.login-footer{
	opacity:1 !important;
	transform:none !important;
	animation:none !important;
}

/* ==========================================================
   UNIFIED SADA AUTHENTICATION IDENTITY
   The static login page consumes the same runtime accent selected by
   theme-preload.js, while every surface stays in the shared dark SADA mode.
========================================================== */
:root{
	--gold:var(--sada-accent-solid,#D4AF37);
	--gold-dark:var(--sada-accent-dark,#B5952F);
	--gold-light:var(--sada-accent-light,#FDF9EE);
	--gold-contrast:var(--sada-accent-contrast,#17130A);
	--login-ink:#F7F4EC;
	--login-muted:#A9A294;
	--login-surface:#171717;
	--login-surface-raised:#222222;
	--login-border:#3A3A3A;
}

.auth-body,
.auth-page{
	background:#0B0B0B !important;
	color:var(--login-ink);
}

.auth-shell,
.brand-panel,
.login-panel,
.login-card{
	background:var(--login-surface) !important;
	color:var(--login-ink);
}

.brand-panel{
	border-right:1px solid rgba(255,255,255,.06);
}

.rwanda-pattern{
	background-color:#111111;
	border-right-color:rgba(255,255,255,.08);
}

.brand-name h1,
.hero-text h2,
.login-header h2{
	font-family:var(--font-family);
	font-variation-settings:"opsz" 32,"wght" 900;
	font-weight:900;
	letter-spacing:-.055em;
}

.brand-name h1,
.hero-text h2{
	font-size:clamp(54px,5vw,72px);
	line-height:.92;
}

.brand-name h1,
.hero-text h2,
.login-header h2{
	color:var(--login-ink) !important;
}

.brand-name h1{
	color:#FFF9E6 !important;
	text-shadow:0 0 24px color-mix(in srgb,var(--gold) 12%,transparent);
}

.brand-tagline,
.hero-text h2 span,
.hero-text .gold-title,
.footer-item i,
.security-item i,
.forgot-password{
	color:var(--gold) !important;
}

.gold-title{
	background:linear-gradient(180deg,var(--gold-light),var(--gold) 58%,var(--gold-dark)) !important;
	-webkit-background-clip:text !important;
	background-clip:text !important;
	-webkit-text-fill-color:transparent !important;
}

.hero-text p,
.login-header p,
.footer-item,
.security-item,
.login-footer{
	color:var(--login-muted) !important;
}

.login-card{
	border-color:var(--login-border) !important;
	box-shadow:0 30px 90px rgba(0,0,0,.28);
}

.input-wrapper input,
.password-change-card input{
	background:var(--login-surface-raised) !important;
	border-color:var(--login-border) !important;
	color:var(--login-ink) !important;
}

.input-wrapper input::placeholder{
	color:#8E897E;
}

.input-wrapper input:focus{
	border-color:var(--gold) !important;
	box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent);
}

.input-wrapper i:first-child,
.password-toggle{
	color:#8E897E;
}

.login-button{
	background:var(--gold) !important;
	color:var(--gold-contrast) !important;
	box-shadow:0 10px 24px color-mix(in srgb,var(--gold) 18%,transparent);
}

.login-button:hover{
	background:var(--gold-dark) !important;
	color:var(--gold-contrast) !important;
}

.login-divider::before{
	background:var(--login-border);
}

.login-divider span{
	background:var(--login-surface);
	color:var(--login-muted);
}

@media (max-width:768px){
	.auth-page{
		padding:0;
		align-items:stretch;
	}

	.auth-shell{
		display:block;
		min-height:100vh;
		border-radius:0;
	}

	.brand-panel{
		display:flex;
		min-height:auto;
		padding:32px 24px 12px;
		border-right:0;
	}

	.rwanda-pattern{
		display:none;
	}

	.brand-content{
		max-width:520px;
		margin:0 auto;
	}

	.brand-logo{
		margin-bottom:10px;
	}

	.logo-image{
		width:48px;
		height:48px;
	}

	.brand-name h1,
	.hero-text h2{
		font-size:42px;
		line-height:.92;
	}

	.brand-tagline{
		margin-top:7px;
		font-size:11px;
		letter-spacing:1.8px;
	}

	.hero-text{
		margin-top:22px;
	}

	.hero-text p,
	.hero-divider,
	.brand-footer{
		display:none;
	}

	.login-panel{
		min-height:auto;
		padding:12px 24px 32px;
	}

	.login-card{
		max-width:520px;
		padding:24px 20px;
	}
}

/* ==========================================================
   APPEARANCE-AWARE LOGIN SURFACES
   theme-preload.js resolves system/light/dark before paint.
   Keep the login page on the same resolved appearance instead
   of forcing the earlier dark-only identity treatment.
========================================================== */
:root{
	--font-display:"SADA Display",var(--font-family);
	--login-page:#0B0B0B;
	--login-surface:#171717;
	--login-surface-raised:#222222;
	--login-ink:#F7F4EC;
	--login-muted:#A9A294;
	--login-border:#3A3A3A;
	--login-pattern:#111111;
	--login-shadow:rgba(0,0,0,.28);
}

:root[data-sada-theme="light"]{
	--login-page:#F5F3EE;
	--login-surface:#FFFDF9;
	--login-surface-raised:#F7F5F0;
	--login-ink:#171717;
	--login-muted:#68706E;
	--login-border:#E2DDD2;
	--login-pattern:#F8F6F0;
	--login-shadow:rgba(38,32,20,.13);
}

.auth-body,
.auth-page{
	background:var(--login-page) !important;
	color:var(--login-ink) !important;
}

.auth-shell,
.brand-panel,
.login-panel,
.login-card,
.password-change-card,
.loading-card{
	background:var(--login-surface) !important;
	color:var(--login-ink) !important;
	border-color:var(--login-border) !important;
}

.brand-panel{
	border-right-color:var(--login-border) !important;
}

.rwanda-pattern{
	background-color:var(--login-pattern) !important;
	border-right-color:var(--login-border) !important;
}

.brand-name h1,
.hero-text h2{
	font-family:var(--font-display);
	font-size:clamp(54px,5vw,72px);
	font-weight:900;
	font-variation-settings:normal;
	letter-spacing:-.055em;
	line-height:.92;
}

.brand-name h1,
.hero-text h2,
.login-header h2{
	color:var(--login-ink) !important;
}

.hero-text p,
.login-header p,
.footer-item,
.security-item,
.login-footer{
	color:var(--login-muted) !important;
}

.login-card{
	box-shadow:0 30px 90px var(--login-shadow) !important;
}

.login-card label,
.remember-me{
	color:var(--login-ink) !important;
}

.input-wrapper input,
.password-change-card input{
	background:var(--login-surface-raised) !important;
	border-color:var(--login-border) !important;
	color:var(--login-ink) !important;
}

.input-wrapper input::placeholder{
	color:var(--login-muted) !important;
}

.input-wrapper input:hover{
	border-color:color-mix(in srgb,var(--sada-accent-solid,#D4AF37) 42%,var(--login-border)) !important;
}

.input-wrapper i:first-child,
.password-toggle{
	color:var(--login-muted) !important;
}

.login-divider::before{
	background:var(--login-border) !important;
}

.login-divider span{
	background:var(--login-surface) !important;
	color:var(--login-muted) !important;
}

@media (max-width:768px){

	.brand-name h1,
	.hero-text h2{
		font-size:42px;
	}

}

/* ==========================================================
   FINAL AUTHENTICATION THEME + BRAND OVERRIDES
   These rules intentionally come last so the setup, loading,
   and password-replacement surfaces cannot fall back to the
   legacy white/gold treatment.
========================================================== */
:root{
--auth-accent:var(--sada-accent-solid,#D4AF37);
--auth-accent-dark:var(--sada-accent-dark,#B5952F);
--auth-accent-light:var(--sada-accent-light,#FDF9EE);
--auth-accent-contrast:var(--sada-accent-contrast,#17130A);
--auth-overlay:rgba(8,8,8,.66);
--auth-input-placeholder:color-mix(in srgb,var(--login-muted) 88%,transparent);
}

:root[data-sada-theme="light"]{
--auth-overlay:rgba(38,32,20,.24);
}

.logo-image,
.login-logo-image{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
object-fit:contain;
}

.brand-logo,
.login-logo{
background:transparent !important;
}

.license-setup-panel,
.password-change-panel,
.auth-loading-overlay{
background:var(--auth-overlay) !important;
}

.license-setup-card,
.password-change-card,
.loading-card{
background:var(--login-surface) !important;
color:var(--login-ink) !important;
border:1px solid var(--login-border) !important;
box-shadow:0 24px 70px var(--login-shadow) !important;
}

.license-setup-card h2,
.license-setup-card > p,
.license-setup-card label,
.password-change-card h2,
.password-change-card > p,
.password-change-card label,
.loading-card h3,
.loading-card p{
color:var(--login-ink) !important;
}

.license-setup-card > p,
.password-change-card > p,
.loading-card p{
color:var(--login-muted) !important;
}

.license-setup-card input,
.license-setup-card textarea,
.password-change-card input{
background:var(--login-surface-raised) !important;
border-color:var(--login-border) !important;
color:var(--login-ink) !important;
}

.license-setup-card input::placeholder,
.license-setup-card textarea::placeholder,
.password-change-card input::placeholder{
color:var(--auth-input-placeholder) !important;
}

.license-setup-card input:focus,
.license-setup-card textarea:focus,
.password-change-card input:focus{
border-color:var(--auth-accent) !important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-accent) 20%,transparent) !important;
outline:none;
}

.license-setup-close,
.license-setup-card .password-change-icon,
.password-change-icon{
color:var(--auth-accent) !important;
}

.license-setup-close:hover{
background:color-mix(in srgb,var(--auth-accent) 16%,transparent) !important;
}

.license-setup-card .password-change-icon,
.password-change-icon{
background:color-mix(in srgb,var(--auth-accent) 15%,var(--login-surface-raised)) !important;
}

.license-setup-card .login-button,
.password-change-card .login-button,
.login-button{
background:var(--auth-accent) !important;
color:var(--auth-accent-contrast) !important;
box-shadow:0 10px 24px color-mix(in srgb,var(--auth-accent) 20%,transparent) !important;
}

.license-setup-card .login-button:hover,
.license-setup-card .login-button:focus-visible,
.password-change-card .login-button:hover,
.password-change-card .login-button:focus-visible,
.login-button:hover,
.login-button:focus-visible{
background:var(--auth-accent-dark) !important;
color:var(--auth-accent-contrast) !important;
}

.license-setup-card .login-button i,
.password-change-card .login-button i{
color:currentColor !important;
}

.loading-spinner{
border-color:var(--login-border) !important;
border-top-color:var(--auth-accent) !important;
}

.license-setup-message[data-state="error"],
.password-change-error{
color:#EF6B73 !important;
}

.license-setup-message[data-state="success"]{
color:#55C98A !important;
}

.input-wrapper i:first-child,
.password-toggle,
.footer-item i,
.security-item i,
.forgot-password,
.brand-tagline,
.hero-text h2 span{
color:var(--auth-accent) !important;
}

/* The runtime license gate is injected after login.html loads. The login
   page intentionally does not load the authenticated app theme bundle, so
   keep its modal contract here instead of allowing it to enter document flow. */
#sadaLicenseGate{
position:fixed !important;
inset:0 !important;
z-index:2147483000 !important;
font-family:var(--font-family,Inter,Arial,sans-serif);
}

#sadaLicenseGate .sada-license-gate-backdrop{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:var(--auth-overlay) !important;
backdrop-filter:blur(8px);
}

#sadaLicenseGate .sada-license-gate-card{
width:min(560px,100%);
max-height:calc(100vh - 48px);
overflow:auto;
box-sizing:border-box;
padding:36px;
border:1px solid var(--login-border) !important;
border-radius:24px;
background:var(--login-surface) !important;
color:var(--login-ink) !important;
box-shadow:0 30px 100px var(--login-shadow) !important;
}

#sadaLicenseGate .sada-license-gate-eyebrow{
margin-bottom:12px;
color:var(--auth-accent) !important;
font-size:13px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}

#sadaLicenseGate h1{
margin:0 0 10px;
color:var(--login-ink) !important;
font-size:30px;
line-height:1.15;
}

#sadaLicenseGate .sada-license-gate-description{
margin:0 0 24px;
color:var(--login-muted) !important;
line-height:1.6;
}

#sadaLicenseGate label{
display:block;
margin-bottom:8px;
color:var(--login-ink) !important;
font-size:13px;
font-weight:700;
}

#sadaLicenseGate textarea{
display:block;
width:100%;
box-sizing:border-box;
padding:14px;
border:1px solid var(--login-border) !important;
border-radius:14px;
background:var(--login-surface-raised) !important;
color:var(--login-ink) !important;
font:inherit;
line-height:1.5;
resize:vertical;
}

#sadaLicenseGate textarea::placeholder{
color:var(--login-muted) !important;
}

#sadaLicenseGate textarea:focus{
outline:2px solid color-mix(in srgb,var(--auth-accent) 45%,transparent);
outline-offset:2px;
border-color:var(--auth-accent) !important;
}

#sadaLicenseGate button{
width:100%;
margin-top:14px;
padding:14px 18px;
border:0;
border-radius:14px;
background:var(--auth-accent) !important;
color:var(--auth-accent-contrast) !important;
font:inherit;
font-weight:800;
cursor:pointer;
}

#sadaLicenseGate button:hover{
background:var(--auth-accent-dark) !important;
}

#sadaLicenseGate button:disabled{
cursor:wait;
opacity:.6;
}

#sadaLicenseGate .sada-license-gate-message{
min-height:20px;
margin-top:12px;
color:#EF6B73 !important;
font-size:13px;
}

#sadaLicenseGate .sada-license-gate-support{
margin-top:18px;
padding-top:18px;
border-top:1px solid var(--login-border);
color:var(--login-muted) !important;
font-size:12px;
line-height:1.6;
}

@media (max-width:600px){
#sadaLicenseGate .sada-license-gate-backdrop{
padding:14px;
}

#sadaLicenseGate .sada-license-gate-card{
max-height:calc(100vh - 28px);
padding:24px;
border-radius:20px;
}

#sadaLicenseGate h1{
font-size:26px;
}
}

/* ==========================================================
   ACCENT-AWARE CIRCULAR SADA MARK
   ========================================================== */

.sada-logo-mark{
display:grid;
place-items:center;
overflow:hidden;
width:clamp(92px, 9vw, 124px);
height:clamp(92px, 9vw, 124px);
border-radius:50%;
aspect-ratio:1;
 background:var(--sada-logo-surface, #fff);
 border:3px solid var(--sada-logo-border,#D4AF37);
 box-shadow:none;
}

.sada-logo-mark img{
display:block;
width:124%;
height:124%;
padding:0;
border:0;
border-radius:0;
object-fit:contain;
}

.sada-logo-mark [data-sada-brand-mark]{
 display:block;
 width:82%;
 height:82%;
 object-fit:contain;
}

.brand-logo .sada-logo-mark{
width:clamp(108px, 11vw, 142px);
height:clamp(108px, 11vw, 142px);
}

.login-logo{
	display:flex;
	justify-content:center;
	margin-bottom:22px;
}

.login-logo .sada-logo-mark{
width:clamp(96px, 8vw, 116px);
height:clamp(96px, 8vw, 116px);
}

@media (max-width:700px){
.brand-logo .sada-logo-mark{
		width:96px;
		height:96px;
	}
.login-logo .sada-logo-mark{
		width:88px;
		height:88px;
	}
}