:root{

--primary:#0046b8;
--secondary:#00c7a5;

--glass:
rgba(255,255,255,0.12);

--border:
rgba(255,255,255,0.18);

--input:
rgba(255,255,255,0.10);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

background:
linear-gradient(
135deg,
#003a96 0%,
#0058d4 45%,
#00c7a5 100%
);

overflow:hidden;
color:white;
}

body.dark{

background:
linear-gradient(
135deg,
#081224,
#0f2144,
#073d4e
);

}

#particles{

position:fixed;
inset:0;
z-index:0;

}

.theme-toggle{

position:fixed;

top:20px;
right:20px;

width:52px;
height:52px;

border:none;
border-radius:50%;

cursor:pointer;

background:white;

box-shadow:
0 10px 30px rgba(0,0,0,.2);

z-index:100;

}

.theme-toggle i{

font-size:18px;
color:#0046b8;

}

.login-container{

position:relative;
z-index:2;

width:100%;
padding:20px;

display:flex;
justify-content:center;

}

.login-card{

position:relative;

width:100%;
max-width:520px;

padding:50px;

border-radius:32px;

background:var(--glass);

backdrop-filter:blur(25px);

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

box-shadow:
0 25px 60px rgba(0,0,0,.25);

overflow:hidden;

}

.watermark{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

font-size:260px;

font-weight:800;

opacity:.03;

pointer-events:none;

}

/* LOGO */

.logo-wrapper{

display:flex;
justify-content:center;

margin-bottom:15px;

}

.logo{

width:260px;
height:auto;

}

/* TITLE */

h1{

text-align:center;

font-size:40px;

font-weight:700;

margin-bottom:8px;

}

.tagline{

text-align:center;

font-size:14px;

opacity:.9;

margin-bottom:35px;

}

/* INPUTS */

.input-group{

position:relative;

margin-bottom:20px;

}

.input-icon{

position:absolute;

left:18px;
top:50%;

transform:translateY(-50%);

color:
rgba(255,255,255,.9);

font-size:16px;

}

.input-group input{

width:100%;

height:58px;

padding-left:55px;
padding-right:55px;

border:none;
outline:none;

border-radius:15px;

background:var(--input);

color:white;

font-size:15px;

}

.input-group input::placeholder{

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

}

.toggle-password{

position:absolute;

right:18px;
top:50%;

transform:translateY(-50%);

cursor:pointer;

color:
rgba(255,255,255,.9);

}

/* OPTIONS */

.options{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

font-size:13px;

}

.options a{

text-decoration:none;
color:white;

}

/* BUTTON */

#loginBtn{

width:100%;
height:58px;

border:none;

border-radius:15px;

font-size:16px;
font-weight:600;

cursor:pointer;

background:
linear-gradient(
90deg,
#00c7a5,
#00e5be
);

color:white;

transition:.3s;

}

#loginBtn:hover{

transform:translateY(-2px);

box-shadow:
0 12px 25px rgba(0,199,165,.35);

}

.footer{

margin-top:25px;

text-align:center;

font-size:13px;

opacity:.85;

}

/* MOBILE */

@media(max-width:768px){

.login-card{

padding:35px 25px;

}

.logo{

width:190px;

}

h1{

font-size:32px;

}

.tagline{

font-size:13px;

}

.options{

flex-direction:column;
gap:10px;

}

}

/* Toast Container */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Base Toast */
.toast {
    min-width: 320px;
    max-width: 450px;
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-family: Arial, sans-serif;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
    animation: slideIn .35s ease forwards;
    position: relative;
    overflow: hidden;
}

/* Icons */
.toast-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: bold;
    margin-bottom: 3px;
}

.toast-message {
    font-size: 14px;
    opacity: .95;
}

/* Types */
.toast-success {
    background: #16a34a;
}

.toast-info {
    background: #2563eb;
}

.toast-warning {
    background: #f59e0b;
}

.toast-error {
    background: #dc2626;
}

/* Close Button */
.toast-close {
    cursor: pointer;
    font-size: 18px;
    opacity: .8;
}

.toast-close:hover {
    opacity: 1;
}

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(255,255,255,.4);
    animation: progress linear forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}