/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap');

:root {
	--bg-deep: #04101e;
	--bg-card: #071828;
	--bg-card2: #09203a;
	--border-glow: #0e4a7a;
	--green-main: #00d4c8;
	--green-btn: #00c4b8;
	--teal: #00e5d4;
	--cyan: #00d1ff;
	--yellow: #f5c518;
	--blue: #2a8fe8;
	--red: #ff4d4d;
	--white: #ddf4f2;
	--muted: #5a9ab5;
}
body {
	background: var(--bg-deep);
	font-family: 'Sora', sans-serif;
	color: #e2e8f0;
	min-height: 100vh;
	padding-bottom: 0px !important;
}

/* Card Styling (Glassmorphism) */
.card {
	background: var(--bg-card);
	border: 1px solid var(--border-glow);
	border: 1px solid rgba(0, 255, 163, 0.15) !important;
	border-radius: 20px !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.account-logo-box h4 {
	color: #00e5d4 !important; /* Neon Green */
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 700;
}

/* Form Controls */
label {
	font-size: 13px;
	font-weight: 600;
	color: #8e9da1;
	margin-bottom: 8px;
	display: block;
}

.form-control {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 12px 15px !important;
	transition: all 0.3s ease;
}

	.form-control:focus {
		background: rgba(0, 255, 163, 0.05) !important;
		border-color: #02d54c !important;
		box-shadow: 0 0 10px rgba(0, 255, 163, 0.2) !important;
	}

/* Neon Button */
.btn-node-submit {
	background: #02d54c !important;
	color: #020b0c !important;
	border: none !important;
	width: 100%;
	padding: 15px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 20px;
	cursor: pointer;
	transition: 0.4s;
	box-shadow: 0 0 20px rgba(0, 255, 163, 0.3);
}

	.btn-node-submit:hover {
		background: #05e693 !important;
		box-shadow: 0 0 30px rgba(0, 255, 163, 0.5);
		transform: translateY(-2px);
	}

/* Terms and Links */
.terms {
	color: #8e9da1;
	font-size: 13px;
}

.login-link {
	color: #00e5d4 !important;
	text-decoration: none;
	font-size: 14px;
	transition: 0.3s;
}

	.login-link:hover {
		text-shadow: 0 0 8px rgba(0, 255, 163, 0.6);
	}
.btn-pay-minimal {
	background: linear-gradient(90deg, #00ffa3, #00d1ff);
	border: none;
	color: #000 !important;
	font-weight: 700;
	padding: 10px;
	border-radius: 8px;
	font-size: 13px;
	margin-top: 20px;
}

/* Validation Message */
#lblMessage, #rfSponsor {
	font-size: 12px;
	margin-top: 5px;
	display: block;
}
/* Page Wrapper Styling */
.account-pages {
	min-height: 100vh;
	display: flex;
	align-items: center; /* Vertically center */
	justify-content: center; /* Horizontally center */
	padding: 60px 0;
	position: relative;
	
}

	/* Background Glowing Orbs (Optional for that AI look) */
	.account-pages::before {
		content: "";
		position: absolute;
		background: #02d54c;
		filter: blur(150px);
		opacity: 0.08;
		top: 10%;
		left: 5%;
		z-index: 0;
	}

	/* Container focus */
	.account-pages .container {
		position: relative;
		z-index: 1;
	}

/* Responsive Padding */
@media (max-width: 576px) {
	.account-pages {
		padding: 30px 15px;
		display: block; /* Stack naturally on mobile */
	}
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet" >

<style >
body {
	background: #05070a !important;
	background-image: radial-gradient(circle at 50% 50%, rgba(0, 255, 163, 0.05), transparent);
	height: 100vh;
	display: flex;
	align-items: center;
	color: white;
	font-family: 'Inter', sans-serif;
}

.welcome-card {
	background: rgba(255, 255, 255, 0.03) !important;
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 25px;
	padding: 40px 30px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.logo-container img {
	max-width: 180px;
	filter: drop-shadow(0 0 10px rgba(0, 255, 163, 0.2));
	margin-bottom: 25px;
}

.info-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.info-value {
	font-weight: 600;
	color: #02d54c;
}

.btn-login {
	background: linear-gradient(135deg, #02d54c, #00d1ff);
	color: #000 !important;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	padding: 12px;
	width: 100%;
	margin-top: 30px;
	transition: 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
}

	.btn-login:hover {
		transform: scale(1.02);
		box-shadow: 0 0 20px rgba(0, 255, 163, 0.4);
	}

</style >