:root{

    --bg-primary:#081c15;
    --bg-secondary:#0b2e1e;

    --card-bg:rgba(255,255,255,.08);

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

    --primary:#22c55e;
    --primary-dark:#16a34a;

    --text-main:#ffffff;
    --text-muted:#cbd5e1;

    --shadow:
        0 20px 50px rgba(0,0,0,.35);

    --radius:24px;

    --transition:.3s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    min-height:100vh;

    font-family:
        Inter,
        Segoe UI,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #071a12,
            #0b2e1e,
            #14532d
        );

    overflow-x:hidden;
    overflow-y:auto;
}

/* =====================================================
   BACKGROUND
===================================================== */

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.25;
}

.circle-1{

    width:350px;
    height:350px;

    background:#22c55e;

    top:-100px;
    left:-100px;
}

.circle-2{

    width:400px;
    height:400px;

    background:#4ade80;

    bottom:-150px;
    right:-150px;
}

/* =====================================================
   MAIN
===================================================== */

.register-wrapper{

    min-height:100vh;

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

    padding:30px;
}

/* =====================================================
   CARD
===================================================== */

.register-card{

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

    min-height:720px;

    display:grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    backdrop-filter:blur(18px);

    background:var(--card-bg);

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

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);
}

/* =====================================================
   LEFT SIDE
===================================================== */

.register-left{

    padding:60px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    color:white;
}

.badge{

    display:inline-flex;

    width:max-content;

    padding:10px 16px;

    border-radius:999px;

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

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

    margin-bottom:24px;

    font-size:13px;
    font-weight:600;
}

.register-left h1{

    font-size:52px;

    margin-bottom:20px;
}

.register-left p{

    color:var(--text-muted);

    line-height:1.8;

    font-size:18px;
}

.feature-list{

    margin-top:40px;

    display:grid;

    gap:16px;
}

.feature{

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

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

    padding:18px;

    border-radius:16px;
}

/* =====================================================
   RIGHT SIDE
===================================================== */

.register-right{

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

    background:rgba(0,0,0,.18);

    padding:50px;
}

.form-panel{

    width:100%;
    max-width:450px;
}

.logo{

    text-align:center;

    margin-bottom:30px;
}

.logo-icon{

    font-size:64px;

    margin-bottom:10px;
}

.logo h2{

    color:white;

    margin-bottom:6px;
}

.logo p{

    color:var(--text-muted);
}

.form-group{

    margin-bottom:18px;
}

.form-group label{

    display:block;

    color:white;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;
}

.form-control{

    width:100%;

    padding:14px 16px;

    border-radius:14px;

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

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

    color:white;

    outline:none;

    transition:.3s;
}

.form-control::placeholder{

    color:#94a3b8;
}

.form-control:focus{

    border-color:#22c55e;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.15);
}

.register-btn{

    width:100%;

    border:none;

    cursor:pointer;

    padding:15px;

    border-radius:14px;

    color:white;

    font-size:15px;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

    transition:.3s;
}

.register-btn:hover{

    transform:translateY(-2px);
}

.login-link{

    margin-top:20px;

    text-align:center;

    color:#cbd5e1;
}

.login-link a{

    color:#4ade80;

    text-decoration:none;

    font-weight:700;
}

.footer{

    margin-top:25px;

    text-align:center;

    color:#94a3b8;

    font-size:13px;
}

.alert{

    background:
        rgba(239,68,68,.15);

    border:
        1px solid rgba(239,68,68,.3);

    color:#fecaca;

    padding:14px;

    border-radius:12px;

    margin-bottom:20px;
}

@media(max-width:950px){

    .register-card{

        grid-template-columns:1fr;
    }

    .register-left{

        display:none;
    }
}