/* ===== BODY ===== */

*{
    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;

    padding:20px;

    overflow-x:hidden;

    overflow-y:auto;

    position:relative;

    background:linear-gradient(
    135deg,
    #17062d,
    #3f0d74,
    #6b21ff
    );

    background-size:400% 400%;

    animation:bgMove 12s linear infinite;

}

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}
#bgCanvas{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:-2;

pointer-events:none;

}
body::before{

content:"";

position:fixed;

width:700px;

height:700px;

background:#9d4dff;

filter:blur(180px);

opacity:.35;

top:-250px;

left:-150px;

border-radius:50%;

animation:glow1 8s infinite alternate;

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:650px;

height:650px;

background:#5b7cff;

filter:blur(180px);

opacity:.25;

bottom:-250px;

right:-200px;

border-radius:50%;

animation:glow2 10s infinite alternate;

z-index:-1;

}

@keyframes glow1{

from{

transform:translate(0,0);

}

to{

transform:translate(120px,80px);

}

}

@keyframes glow2{

from{

transform:translate(0,0);

}

to{

transform:translate(-100px,-60px);

}

}
/* ===========================
   PREMIUM GLASS LOGIN CARD
=========================== */

.login-card{

    position:relative;

    width:420px;

    max-width:95%;

    padding:35px;

    border-radius:30px;

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

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.35),
    inset 0 1px rgba(255,255,255,.15);

    overflow:hidden;

    animation:cardShow .7s ease;

}

.login-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:250px;

height:250px;

border-radius:50%;

background:rgba(170,90,255,.18);

filter:blur(50px);

}

.login-card::after{

content:"";

position:absolute;

bottom:-120px;

left:-120px;

width:250px;

height:250px;

border-radius:50%;

background:rgba(120,70,255,.15);

filter:blur(50px);

}

@keyframes cardShow{

from{

opacity:0;

transform:translateY(40px) scale(.95);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}
.logo{

font-size:42px;

font-weight:700;

color:#ffffff;

letter-spacing:.5px;

margin-bottom:5px;

}

.logo span{

color:#b266ff;

}
.top-bar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}
.actions{

display:flex;

gap:12px;

}

.actions button{

width:52px;

height:52px;

border:none;

border-radius:50%;

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

color:#fff;

font-size:18px;

cursor:pointer;

transition:.3s;

}

.actions button:hover{

transform:scale(1.08);

background:#8b5cf6;

}
/* ===========================
   LOGIN / REGISTER TABS
=========================== */

.tabs{

display:flex;

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

padding:6px;

border-radius:18px;

margin-bottom:28px;

gap:8px;

}

.tabs a{

flex:1;

text-decoration:none;

}

.tabs button{

width:100%;

height:52px;

border:none;

border-radius:14px;

background:transparent;

color:#ffffff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.tabs button:hover{

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

}

.tabs .active{

background:linear-gradient(
90deg,
#7c3aed,
#a855f7,
#c084fc
);

box-shadow:
0 10px 25px rgba(168,85,247,.45);

animation:activeTab 2s infinite alternate;

}

@keyframes activeTab{

from{

transform:scale(1);

}

to{

transform:scale(1.03);

}

}
.login-btn{

width:100%;

height:56px;

border:none;

border-radius:16px;

background:linear-gradient(
90deg,
#6d28d9,
#8b5cf6,
#a855f7
);

background-size:200%;

color:#fff;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.35s;

box-shadow:
0 12px 30px rgba(139,92,246,.45);

}

.login-btn:hover{

background-position:right center;

transform:translateY(-2px);

box-shadow:
0 18px 40px rgba(168,85,247,.55);

}
.divider{

display:flex;

align-items:center;

margin:24px 0;

color:#ddd;

font-size:14px;

}

.divider::before,
.divider::after{

content:"";

flex:1;

height:1px;

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

}

.divider::before{

margin-right:15px;

}

.divider::after{

margin-left:15px;

}
/* ===========================
   PREMIUM INPUT BOX
=========================== */

.input-group{

position:relative;

margin-bottom:22px;

}

.input-group input{

width:100%;

height:58px;

padding:0 55px;

border-radius:16px;

border:1px solid rgba(255,255,255,.15);

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

backdrop-filter:blur(10px);

color:#fff;

font-size:16px;

outline:none;

transition:.35s;

}

/* Placeholder */

.input-group input::placeholder{

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

}

/* Focus */

.input-group input:focus{

border:1px solid #a855f7;

box-shadow:

0 0 0 3px rgba(168,85,247,.18),

0 0 25px rgba(168,85,247,.30);

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

}
.input-group .left-icon{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:#b266ff;

transition:.3s;

}

.input-group input:focus + .left-icon{

color:#ffffff;

}
.password-toggle{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

font-size:18px;

cursor:pointer;

color:#cccccc;

transition:.3s;

}

.password-toggle:hover{

color:#ffffff;

transform:translateY(-50%) scale(1.15);

}
.form-options{

display:flex;

justify-content:space-between;

align-items:center;

margin:18px 0;

font-size:14px;

}

.form-options label{

display:flex;

align-items:center;

gap:8px;

cursor:pointer;

color:#ddd;

}

.form-options input{

width:18px;

height:18px;

accent-color:#8b5cf6;

}

.form-options a{

color:#c084fc;

text-decoration:none;

}

.form-options a:hover{

color:#ffffff;

}
.input-group:hover input{

border-color:rgba(168,85,247,.45);

}
/* ===========================
   PREMIUM SOCIAL LOGIN
=========================== */

.social{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:15px;

margin-top:20px;

}

.social button{

height:58px;

border:none;

border-radius:16px;

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

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(10px);

color:#fff;

font-size:22px;

cursor:pointer;

transition:.35s;

}

/* Google */

.social .google:hover{

background:#EA4335;

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(234,67,53,.45);

}

/* Facebook */

.social .facebook:hover{

background:#1877F2;

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(24,119,242,.45);

}

/* GitHub */

.social .github:hover{

background:#24292f;

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,0,0,.45);

}
/* ===========================
   TELEGRAM BUTTON
=========================== */

.telegram{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(
135deg,
#0088cc,
#229ED9
);

color:#fff;

font-size:30px;

text-decoration:none;

box-shadow:0 15px 35px rgba(34,158,217,.45);

transition:.35s;

z-index:999;

animation:telegramFloat 2s infinite;

}

.telegram:hover{

transform:scale(1.12);

}

@keyframes telegramFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
/* ===========================
   LIGHT MODE
=========================== */

body.light{

background:#f4f5fb;

color:#222;

}

body.light .login-card{

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

color:#222;

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

}

body.light .input-group input{

background:#f6f6f6;

color:#222;

border:1px solid #ddd;

}

body.light .input-group input::placeholder{

color:#777;

}

body.light .tabs button{

color:#222;

}

body.light .divider{

color:#555;

}

body.light .forgot a{

color:#6d28d9;

}

body.light .logo{

color:#222;

}

body.light .actions button{

background:#ececec;

color:#222;

}

/* ===========================
   PAGE LOADER
=========================== */

.login-card{

animation:fadeUp .7s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:768px){

.login-card{

width:95%;

padding:22px;

border-radius:22px;

}

.logo{

font-size:28px;

}

.login-btn{

height:52px;

font-size:16px;

}

.social{

grid-template-columns:repeat(3,1fr);

gap:10px;

}

.telegram{

width:58px;

height:58px;

font-size:26px;

right:18px;

bottom:18px;

}

}