html, body {
	overscroll-behavior: none;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    z-index: 99999;
    background: 
    radial-gradient(circle at 20% 20%, rgba(255, 200, 0, .15), transparent 40%), 
    radial-gradient(circle at 80% 80%, rgba(0, 208, 148, .12), transparent 40%), 
    linear-gradient(135deg, #f8fafc, #eef2f7);
}

body.dark-mode .preloader{
	background:
	radial-gradient(circle at 15% 25%, rgba(240,185,11,0.14), transparent 50%),
	radial-gradient(circle at 85% 75%, rgba(0,208,148,0.12), transparent 50%),
	linear-gradient(140deg,#121212,#181818,#1c1c1c);
}

.account::after{
	background-image: none !important;
}


/* ===== WALLET LOGIN UI ===== */
.wallet-login{
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
    radial-gradient(circle at 20% 20%, rgba(255,200,0,.15), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0,208,148,.12), transparent 40%),
    linear-gradient(135deg,#f8fafc,#eef2f7);
}

/* glass card */
.wallet-login .account__inner{
    backdrop-filter:blur(18px);
    background:rgba(255,255,255,0.65);
    border:1px solid rgba(255,255,255,0.35);
    border-radius:22px;
    box-shadow:
    0 20px 60px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.4);
    padding:55px;
} 

.form-label { 
    font-size: 0.9rem;
    font-family: "Open Sans", sans-serif;
    color: #0f172a;
    font-weight: 500;
}

body.dark-mode .form-label {
	color: #f8fafc;
}

body.dark-mode .wallet-login{
	background:
	radial-gradient(circle at 15% 25%, rgba(240,185,11,0.14), transparent 50%),
	radial-gradient(circle at 85% 75%, rgba(0,208,148,0.12), transparent 50%),
	linear-gradient(140deg, #121212, #181818, #1c1c1c);
}

body.dark-mode .wallet-login .account__inner{
	background: rgba(18, 18, 18, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow:
	0 25px 70px rgba(0,0,0,0.85),
	inset 0 1px 0 rgba(255,255,255,0.03);
	backdrop-filter: blur(16px);
}

body.dark-mode .wallet-login .account__header h2{
	color:#f8fafc;
}

body.dark-mode .wallet-login .account__header p{
	color:#94a3b8;
}

body.dark-mode .wallet-login .form-control{
	background:#1c1c1c;
	border:1px solid rgba(255,255,255,.06); 
	color:#e5e5e5;
}

body.dark-mode .wallet-login .form-control::placeholder{
	color:#777;
}

body.dark-mode .wallet-login .form-control:focus{
	border-color:#f0b90b;
	box-shadow:0 0 0 3px rgba(240,185,11,.25);
	color: #e5e5e5 !important;
}

body.dark-mode .wallet-login .account__switch p{
	color:#94a3b8;
}

body.dark-mode .wallet-login .account__check-forgot a{
	color:#f0b90b;
}

body.dark-mode #darkmodeSwitch{
	background:#020617;
	color:#fff;
}

.wallet-login .account__inner{
	
	background:rgba(255,255,255,.65);
	backdrop-filter:blur(18px);
	
	border-radius:22px;
	
	border:1px solid rgba(255,255,255,.35);
	
	box-shadow:
	0 20px 60px rgba(0,0,0,.12),
	inset 0 1px 0 rgba(255,255,255,.4);
}

/* logo image */
.wallet-login .account__thumb{
    text-align:center;
}

.wallet-login .account__thumb img{
    max-width:390px;
    animation:walletFloat 5s ease-in-out infinite;
}

/* title */
.wallet-login .account__header h2{
    font-size:34px;
    font-weight:700;
    color:#0f172a;
}

.wallet-login .account__header p{
    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

/* input */
.wallet-login .form-control{
    height:54px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,0.08);
    background:rgba(255,255,255,0.8);
    padding-left:18px;
    font-size:14px;
    transition:all .25s;
}

.wallet-login .form-control:focus{
    border-color:#f0b90b;
    box-shadow:0 0 0 3px rgba(240,185,11,.2);
    background:#fff;
}

/* password eye */
.wallet-login .form-pass__toggle{
    right:14px;
    top:40px;
    color:#94a3b8;
}

/* login button */
.wallet-login .trk-btn{
    height:56px;
    border-radius:14px;
    font-weight:600;
    font-size:16px;

    background:linear-gradient(135deg,#f0b90b,#ffd76a);
    border:none;
    color:#1e293b;

    transition:all .25s;
}

.wallet-login .trk-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(240,185,11,.4);
}

/* ===== FACE ID BUTTON ===== */

.wallet-login .wallet-biometric{
    margin-top:20px;
    text-align:center;
}

.wallet-login .wallet-biometric button{
    width:100%;
    height:52px;

    border-radius:14px;
    border:1px solid rgba(0,0,0,.08);

    background:rgb(255 255 255);
    backdrop-filter:blur(12px);

    font-weight:600;
    color:#334155;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    transition:all .25s;
}

.wallet-login .wallet-biometric button:hover{
    background:#fff;
    transform:translateY(-1px);
}

/* biometric icon */
.wallet-login .wallet-biometric svg{
    width:22px;
    height:22px;
}

/* forgot password */
.wallet-login .account__check-forgot a{
    color:#f0b90b;
    font-weight:500;
}

/* signup */
.wallet-login .account__switch{
    margin-top:25px;
    text-align:center;
}

.wallet-login .account__switch a{
    color:#f0b90b;
    font-weight:600;
}

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

@keyframes walletFloat{
	0%{
	transform:translateY(0px);
	}
	
	50%{
	transform:translateY(-10px);
	}
	
	100%{
	transform:translateY(0px);
	}
}

/* ===== MOBILE ===== */

@media(max-width:991px){

.wallet-login .account__inner{
padding:35px;
}

.wallet-login .account__thumb img{
max-width:220px;
}

.wallet-login .account__header h2{
font-size:26px;
}

}

/*
CSS Toggle Button
*/

.wallet-dark-toggle{
	position:absolute;
	top:25px;
	right:25px;
	z-index:10;
}

#darkmodeSwitch{
	width:42px;
	height:42px;
	border-radius:50%;
	border:none;
	cursor:pointer;
	
	background:rgba(255,255,255,0.6);
	backdrop-filter:blur(10px);
	
	font-size:18px;
	
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
	
	transition:all .25s ease;
}

#darkmodeSwitch:hover{
	transform:scale(1.08);
}