/*==================================================
 ANOROT LOGIN SYSTEM PRO
 Frontend CSS v2.0 (Part-1)
==================================================*/

:root{

    --alsp-primary:#5B21B6;
    --alsp-secondary:#7C3AED;
    --alsp-success:#16A34A;
    --alsp-danger:#DC2626;

    --alsp-bg:#F4F6FB;

    --alsp-white:#ffffff;

    --alsp-text:#1E293B;

    --alsp-border:#E5E7EB;

    --alsp-radius:14px;

    --alsp-shadow:0 20px 60px rgba(0,0,0,.08);

    --alsp-transition:.30s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body.alsp-login-page{

background:linear-gradient(135deg,#eef2ff,#f8fafc);

font-family:Inter,Arial,sans-serif;

color:var(--alsp-text);

min-height:100vh;

}

.alsp-wrapper{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:40px;

}

.alsp-container{

width:100%;

max-width:1180px;

background:#fff;

display:flex;

overflow:hidden;

border-radius:22px;

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

}

.alsp-left{

width:50%;

padding:55px;

background:#fff;

}

.alsp-right{

width:50%;

background:linear-gradient(145deg,#5B21B6,#7C3AED);

display:flex;

justify-content:center;

align-items:center;

padding:60px;

color:#fff;

text-align:center;

position:relative;

overflow:hidden;

}

.alsp-right::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

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

top:-180px;

right:-120px;

}

.alsp-right::after{

content:"";

position:absolute;

width:280px;

height:280px;

border-radius:50%;

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

bottom:-100px;

left:-80px;

}

.alsp-right-content{

position:relative;

z-index:2;

}

.alsp-right h1{

font-size:42px;

font-weight:700;

margin-bottom:18px;

}

.alsp-right p{

font-size:18px;

line-height:32px;

opacity:.9;

}

.alsp-logo{

text-align:center;

margin-bottom:40px;

}

.alsp-logo img{

max-width:220px;

height:auto;

}

.alsp-logo h1{

font-size:32px;

font-weight:700;

color:var(--alsp-primary);

}

.alsp-tabs{

display:flex;

background:#F1F5F9;

padding:6px;

border-radius:12px;

margin-bottom:35px;

}

.alsp-tab{

flex:1;

border:none;

background:transparent;

height:50px;

font-size:16px;

font-weight:600;

cursor:pointer;

border-radius:10px;

transition:var(--alsp-transition);

}

.alsp-tab.active{

background:var(--alsp-primary);

color:#fff;

box-shadow:0 8px 20px rgba(91,33,182,.25);

}

.alsp-title{

margin-bottom:30px;

}

.alsp-title h2{

font-size:32px;

margin-bottom:8px;

}

.alsp-title p{

font-size:15px;

color:#64748B;

}

.alsp-group{

margin-bottom:22px;

}

.alsp-group label{

display:block;

margin-bottom:8px;

font-size:14px;

font-weight:600;

}

.alsp-group input{

width:100%;

height:55px;

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

border-radius:12px;

padding:0 18px;

font-size:15px;

outline:none;

transition:var(--alsp-transition);

background:#fff;

}

.alsp-group input:focus{

border-color:var(--alsp-primary);

box-shadow:0 0 0 4px rgba(91,33,182,.10);

}

.alsp-password{

position:relative;

}

.alsp-password span{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:20px;

}

.alsp-options{

display:flex;

justify-content:space-between;

align-items:center;

margin:22px 0 28px;

font-size:14px;

}

.alsp-options a{

color:var(--alsp-primary);

text-decoration:none;

font-weight:600;

}

.alsp-options a:hover{

text-decoration:underline;

}

.alsp-btn{

width:100%;

height:56px;

border:none;

background:var(--alsp-primary);

color:#fff;

font-size:17px;

font-weight:600;

border-radius:12px;

cursor:pointer;

transition:var(--alsp-transition);

}

.alsp-btn:hover{

background:var(--alsp-secondary);

transform:translateY(-2px);

}

.alsp-form{

display:none;

}

.alsp-form.active{

display:block;

animation:alspFade .35s ease;

}

@keyframes alspFade{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==================================================
 ANOROT LOGIN SYSTEM PRO
 Frontend CSS v2.0 (Part-2)
==================================================*/

/* ---------- FORM MESSAGE ---------- */

.alsp-message{

    display:none;

    padding:15px 18px;

    border-radius:12px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:500;

}

.alsp-message.success{

    display:block;

    background:#ECFDF5;

    color:#15803D;

    border:1px solid #BBF7D0;

}

.alsp-message.error{

    display:block;

    background:#FEF2F2;

    color:#DC2626;

    border:1px solid #FECACA;

}

/* ---------- CHECKBOX ---------- */

.alsp-options label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    user-select:none;

}

.alsp-options input[type=checkbox]{

    width:18px;

    height:18px;

    accent-color:var(--alsp-primary);

}

/* ---------- BUTTON LOADING ---------- */

.alsp-btn.loading{

    opacity:.75;

    cursor:not-allowed;

    pointer-events:none;

}

.alsp-btn.loading::after{

    content:"";

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    display:inline-block;

    margin-left:12px;

    animation:alspSpin .8s linear infinite;

    vertical-align:middle;

}

@keyframes alspSpin{

    to{

        transform:rotate(360deg);

    }

}

/* ---------- INPUT ERROR ---------- */

.alsp-group input.error{

    border-color:#DC2626;

    box-shadow:0 0 0 3px rgba(220,38,38,.10);

}

.alsp-group input.success{

    border-color:#16A34A;

    box-shadow:0 0 0 3px rgba(22,163,74,.10);

}

/* ---------- PLACEHOLDER ---------- */

.alsp-group input::placeholder{

    color:#94A3B8;

}

/* ---------- LINK ---------- */

.alsp-link{

    text-align:center;

    margin-top:20px;

    font-size:14px;

}

.alsp-link a{

    color:var(--alsp-primary);

    text-decoration:none;

    font-weight:600;

}

/* ---------- DIVIDER ---------- */

.alsp-divider{

    display:flex;

    align-items:center;

    margin:28px 0;

}

.alsp-divider::before,

.alsp-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E5E7EB;

}

.alsp-divider span{

    margin:0 15px;

    color:#94A3B8;

    font-size:13px;

}

/* ---------- SOCIAL BUTTON ---------- */

.alsp-social{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}

.alsp-social button{

    height:50px;

    border:1px solid #E5E7EB;

    background:#fff;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

    font-size:15px;

    font-weight:600;

}

.alsp-social button:hover{

    background:#F8FAFC;

}

/* ---------- FOOTER ---------- */

.alsp-footer{

    text-align:center;

    margin-top:35px;

    color:#94A3B8;

    font-size:13px;

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#D1D5DB;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#F8FAFC;

}

/* ---------- MOBILE ---------- */

@media(max-width:991px){

.alsp-container{

flex-direction:column;

max-width:650px;

}

.alsp-left{

width:100%;

padding:40px;

}

.alsp-right{

width:100%;

padding:60px 35px;

}

.alsp-right h1{

font-size:34px;

}

}

/* ---------- SMALL MOBILE ---------- */

@media(max-width:768px){

.alsp-wrapper{

padding:15px;

}

.alsp-left{

padding:30px 22px;

}

.alsp-right{

padding:45px 25px;

}

.alsp-right h1{

font-size:28px;

}

.alsp-title h2{

font-size:28px;

}

.alsp-tabs{

flex-direction:column;

gap:8px;

background:none;

padding:0;

}

.alsp-tab{

border-radius:10px;

background:#F1F5F9;

}

}

/* ---------- EXTRA SMALL ---------- */

@media(max-width:480px){

.alsp-wrapper{

padding:10px;

}

.alsp-container{

border-radius:16px;

}

.alsp-logo img{

max-width:170px;

}

.alsp-group input{

height:50px;

font-size:14px;

}

.alsp-btn{

height:50px;

font-size:15px;

}

.alsp-options{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.alsp-social{

grid-template-columns:1fr;

}

.alsp-right{

display:none;

}

}


.alsp-dashboard{

max-width:1200px;

margin:60px auto;

padding:20px;

}

.alsp-card{

background:#fff;

padding:40px;

border-radius:16px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.alsp-card h2{

margin-bottom:20px;

}

.alsp-card p{

margin:15px 0;

}