:root{
    --primary:#6C4CF1;
    --primary2:#8A6CFF;
    --dark:#121826;
    --light:#f8f9ff;
    --border:#e8ebff;
    --success:#16a34a;
    --danger:#dc2626;
}

body{
    background:
    radial-gradient(circle at top left,#8b5cf620,transparent 40%),
    radial-gradient(circle at bottom right,#3b82f620,transparent 40%),
    linear-gradient(135deg,#eef2ff,#ffffff);
    min-height:100vh;
    font-family:Inter,sans-serif;
}

.auth-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:60px 0;
}

.auth-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:
    0 20px 70px rgba(0,0,0,.08);
}

.left-side{
    padding:60px;
}

.right-side{
    background:
    linear-gradient(
    135deg,
    #6C4CF1,
    #8A6CFF,
    #4F46E5);
    color:#fff;
    padding:60px;
    position:relative;
    overflow:hidden;
}

.right-side::before{
    content:'';
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    position:absolute;
    top:-120px;
    right:-120px;
}

.right-side::after{
    content:'';
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    position:absolute;
    bottom:-80px;
    left:-80px;
}

.brand-logo{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#6C4CF1;
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;
}

.brand-title{
    font-size:42px;
    font-weight:800;
    margin-bottom:12px;
}

.brand-desc{
    font-size:17px;
    opacity:.9;
    line-height:1.7;
}

.feature-box{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.feature-icon{
    width:50px;
    height:50px;
    border-radius:15px;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.form-title{
    font-size:40px;
    font-weight:800;
    color:#111827;
}

.form-subtitle{
    color:#6b7280;
    margin-bottom:35px;
}

.form-floating{
    margin-bottom:22px;
}

.form-control{
    height:60px;
    border-radius:16px;
    border:2px solid var(--border);
    box-shadow:none!important;
}

.form-control:focus{
    border-color:var(--primary);
}

.form-floating label{
    color:#6b7280;
}

.input-icon{
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);
}

.validation-message{
    font-size:13px;
    margin-top:8px;
}

.progress{
    height:8px;
    border-radius:30px;
}

.password-rules{
    list-style:none;
    padding:0;
    margin:15px 0 0;
}

.password-rules li{
    margin-bottom:8px;
    font-size:14px;
}

.btn-register{
    height:58px;
    border:none;
    border-radius:16px;
    background:linear-gradient(135deg,#6C4CF1,#4F46E5);
    font-weight:700;
    font-size:17px;
}

.btn-register:hover{
    transform:translateY(-2px);
}

.auth-footer{
    text-align:center;
    margin-top:30px;
}

.auth-footer a{
    text-decoration:none;
    font-weight:700;
}

@media(max-width:991px){

.right-side{
display:none;
}

.left-side{
padding:35px;
}

.form-title{
font-size:32px;
}

}
.auth-card{
    animation:fadeUp .8s ease;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.form-control{

transition:.3s;

}

.form-control:hover{

border-color:#c7d2fe;

}

.form-control:focus{

background:#fff;

box-shadow:
0 0 0 .25rem rgba(108,76,241,.12)!important;

}

.input-group .btn{

border-radius:0 16px 16px 0;

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

border-left:none;

}

.input-group .form-control{

border-right:none;

}

.spinner-border-sm{

width:16px;

height:16px;

}

.text-success{

color:#16a34a!important;

}

.text-danger{

color:#dc2626!important;

}

.validation-message{

min-height:20px;

}

.password-rules li{

display:flex;

align-items:center;

gap:8px;

transition:.3s;

}

.password-rules li::before{

content:"✖";

font-size:12px;

color:#dc2626;

font-weight:700;

}

.password-rules li.text-success::before{

content:"✔";

color:#16a34a;

}

.progress{

background:#ececff;

overflow:hidden;

}

.progress-bar{

transition:width .4s ease;

}

.btn-register{

transition:.3s;

box-shadow:

0 10px 30px rgba(108,76,241,.35);

}

.btn-register:hover{

box-shadow:

0 18px 40px rgba(108,76,241,.45);

}

.btn-register:disabled{

opacity:.7;

cursor:not-allowed;

box-shadow:none;

}

.brand-badge{

display:inline-block;

padding:8px 18px;

border-radius:40px;

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

backdrop-filter:blur(10px);

margin-bottom:25px;

font-size:14px;

}

.brand-image{

width:100%;

max-width:420px;

margin-top:45px;

animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

.login-link{

font-weight:700;

color:var(--primary);

}

.login-link:hover{

color:#4F46E5;

}

@media(max-width:576px){

.auth-section{

padding:20px 0;

}

.auth-card{

border-radius:18px;

}

.left-side{

padding:25px;

}

.form-control{

height:55px;

}

.form-title{

font-size:28px;

}

}

/*=========================================================
  Root4.space Authentication
  File : assets/css/auth.css
  Version : 1.0
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#6C63FF;
--secondary:#8B5CF6;
--accent:#06B6D4;

--success:#22C55E;
--danger:#EF4444;
--warning:#F59E0B;

--white:#ffffff;
--black:#111827;

--text:#E5E7EB;
--muted:#94A3B8;

--glass:rgba(255,255,255,.08);

--glass-border:rgba(255,255,255,.15);

--radius:22px;

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

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html,
body{

height:100%;

}

body{

font-family:'Outfit',sans-serif;

background:

linear-gradient(
135deg,
#09090f 0%,
#111827 40%,
#1E1B4B 100%
);

color:var(--text);

overflow-x:hidden;

}

/*==========================
Animated Background
==========================*/

body::before{

content:'';

position:fixed;

left:-200px;
top:-200px;

width:500px;
height:500px;

background:

radial-gradient(
circle,
rgba(108,99,255,.35),
transparent 70%
);

filter:blur(30px);

animation:blob1 12s infinite alternate;

z-index:-2;

}

body::after{

content:'';

position:fixed;

right:-200px;
bottom:-200px;

width:600px;
height:600px;

background:

radial-gradient(
circle,
rgba(6,182,212,.25),
transparent 70%
);

filter:blur(35px);

animation:blob2 15s infinite alternate;

z-index:-2;

}

@keyframes blob1{

0%{

transform:
translate(0,0)
scale(1);

}

100%{

transform:
translate(120px,90px)
scale(1.4);

}

}

@keyframes blob2{

0%{

transform:
translate(0,0)
scale(1);

}

100%{

transform:
translate(-150px,-120px)
scale(1.3);

}

}

/*==========================
Layout
==========================*/

.auth-wrapper{

display:flex;

min-height:100vh;

}

.auth-left{

width:55%;

padding:70px;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

}

.auth-right{

width:45%;

display:flex;

align-items:center;

justify-content:center;

padding:50px;

}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(
135deg,
rgba(108,99,255,.15),
rgba(6,182,212,.10)
);

backdrop-filter:blur(5px);

}

.hero-content{

position:relative;

z-index:5;

max-width:650px;

}

.logo{

display:flex;

align-items:center;

gap:14px;

text-decoration:none;

color:#fff;

font-size:32px;

font-weight:800;

margin-bottom:50px;

}

.logo-icon{

width:60px;
height:60px;

border-radius:18px;

background:

linear-gradient(
135deg,
var(--primary),
var(--accent)
);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

box-shadow:0 15px 35px rgba(108,99,255,.4);

}

.hero-badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

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

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

font-size:14px;

margin-bottom:30px;

backdrop-filter:blur(15px);

}

.hero-content h1{

font-size:62px;

font-weight:800;

line-height:1.08;

margin-bottom:25px;

color:#fff;

}

.hero-content h1 span{

background:

linear-gradient(
90deg,
#8B5CF6,
#06B6D4
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-content p{

font-size:19px;

line-height:34px;

color:#CBD5E1;

margin-bottom:40px;

}