:root{
    --primary:#0b1e3a;
    --accent:#2563eb;

    --bg-main:#020617;        /* background utama */
    --bg-soft:#020617;        /* unify – dark */
    --glass:rgba(15,23,42,.88);

    --text-main:#e5e7eb;
    --text-muted:#94a3b8;

    --gold:#f4c430;
}

*,
*::before,
*::after{
    box-sizing: border-box;
}

body{
    font-family:'Nunito', sans-serif;
    background:radial-gradient(
        1200px 600px at top,
        #020617,
        #020617
    );

    color:var(--text-main);

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

    min-height:100dvh;
    margin:0;
    padding:20px;
    overflow-x:hidden;
}

.animated-bg{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.animated-bg::before,
.animated-bg::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(120px);
    opacity:.4;
}

/* Parent Mode */
body.parent-bg .animated-bg::before{
    background:#f4c430;
    top:-150px;
    left:-150px;
    animation:float1 18s ease-in-out infinite alternate;
}

body.parent-bg .animated-bg::after{
    background:#ff6ec7;
    bottom:-150px;
    right:-150px;
    animation:float2 22s ease-in-out infinite alternate;
}

/* Teacher Mode */
body.teacher-bg .animated-bg::before{
    background:#2563eb;
    top:-200px;
    left:-200px;
    animation:float1 22s ease-in-out infinite alternate;
}

body.teacher-bg .animated-bg::after{
    background:#0f172a;
    bottom:-200px;
    right:-200px;
    animation:float2 25s ease-in-out infinite alternate;
}

@keyframes float1{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(120px,80px) scale(1.15); }
}

@keyframes float2{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(-100px,-60px) scale(1.1); }
}

body.parent-bg{
    background:linear-gradient(135deg,#3a2a00,#071a33);
}

body.teacher-bg{
    background:linear-gradient(135deg,#001f3f,#004080);
}

.login-container{
    position:relative;

    background:var(--glass);
    backdrop-filter:blur(20px);

    padding:40px 38px 32px;
    border-radius:26px;

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

    text-align:center;

    border:2px solid gold;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 0 40px rgba(244,196,48,.15),
        0 40px 80px rgba(0,0,0,.85),
        inset 0 1px 0 rgba(255,255,255,.06);

    display:flex;
    flex-direction:column;
    align-items:center;

    overflow:hidden;
    z-index:2;
}

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

/* PATTERN PALING BELAKANG */
.login-container::before{
    content:"";
    position:absolute;
    inset:0;

    background:url("images/islamic-pattern.png");
    background-size:280px;
    background-repeat:repeat;
    background-position:center;

    opacity:0.05;

    z-index:0; /* belakang semua content */
    pointer-events:none;
}

/* PASTIKAN SEMUA CONTENT ATAS PATTERN */
.login-container > *{
    position:relative;
    z-index:2;
}

/* GAMBAR */
.login-logo{
    margin-bottom:0px; /* rapatkan dengan tajuk */
}

.login-logo img{
    max-width:100%;
    height:auto;
}
/* TAJUK */
h1{
    font-weight:900;
    font-size:34px;
    letter-spacing:.4px;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    margin:10px 0 0px;
}

/* AYAT */
.login-desc{
    font-size:14px;
    color:var(--text-muted);
    margin-bottom:20px;
    line-height:1.5;
}


/* FORM */
form{
    width:100%;
}

input{
    width:100%;
    padding:14px;
    margin-bottom:16px;

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

    font-size:14px;

    background:rgba(2,6,23,.9);
    color:var(--text-main);
    line-height:1.2; /* TAMBAH NI */

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);

    transition:.25s ease;
}

input::placeholder{
    color:var(--text-muted);
}

input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(37,99,235,.35);
    outline:none;
}

button{
    width:100%;
    padding:15px;
    border-radius:20px;
    border:none;

    font-family:'Poppins', sans-serif;
    font-weight:600;

    background:linear-gradient(
        135deg,
        var(--accent),
        #1e3a8a
    );
    color:white;

    cursor:pointer;
    transition:.25s ease;

    box-shadow:0 15px 30px rgba(37,99,235,.35);
}

button:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(37,99,235,.5);
}

button:active{
    transform:scale(.97);
}

/* DISCLAIMER */
.disclaimer{
    font-size:12px;
    color:var(--text-muted);
    margin-top:18px;
}

/* MOBILE OPTIMIZE */
@media (max-width:480px){

    .login-container{
        padding:25px 20px;
        border-radius:20px;
    }

    .login-logo img{
        width:160px;
    }

    h1{
        font-size:28px;
    }

    .login-desc{
        font-size:13px;
    }

    input{
        font-size:13px;
        padding:11px;
    }

    button{
        padding:11px;
        font-size:14px;
    }

}

.role-btn i{
    margin-right:6px;
}

/* =========================
   APPLE SEGMENTED CONTROL EXTREME
========================= */

.role-selector{
    position:relative;
    display:flex;
    width:100%;
    margin-bottom:26px;
    border-radius:18px;
    padding:4px;

    background:rgba(255,255,255,.4);
    backdrop-filter:blur(25px);

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.08),
        0 12px 30px rgba(0,0,0,.18);

    isolation:isolate;
}

/* Sliding Pill */
.role-selector::before{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:calc(50% - 4px);
    height:calc(100% - 8px);

    border-radius:14px;

    background:linear-gradient(135deg,#f4c430,#ffd86b);

    box-shadow:
        0 8px 20px rgba(244,196,48,.45),
        inset 0 1px 0 rgba(255,255,255,.6);

    transition:transform .4s cubic-bezier(.25,.8,.25,1);
    z-index:0;
    backdrop-filter:blur(10px);
}

/* Bila teacher active → slide kanan */
.role-selector.teacher-active::before{
    transform:translateX(100%);
}

.role-btn{
    flex:1;
    padding:14px 10px;
    border:none;
    background:none;
    cursor:pointer;

    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:.3px;

    border-radius:14px;

    color:#444;
    z-index:1;
    position:relative;

    transition:
        color .3s ease,
        transform .2s ease;
    
    text-transform:capitalize;
}

.role-btn.active{
    color:#000;
}

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

.arabic-typing{
    height:60px;
    margin-bottom:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
}

.arabic{
    font-family:'Amiri', serif;
    font-size:42px;
    direction:rtl;
    unicode-bidi:plaintext;
    color:#0b1e3a;
    letter-spacing:2px;
    position:relative;
    text-shadow:
        0 0 6px rgba(11,30,58,.25);
    animation:glowPulse 1.5s ease-in-out infinite;
}

@keyframes blink{
    0%,100%{opacity:1;}
    50%{opacity:0;}
}

@keyframes glowPulse{
    0%{
        text-shadow:0 0 6px rgba(11,30,58,.25);
    }
    50%{
        text-shadow:
            0 0 12px rgba(11,30,58,.6),
            0 0 24px rgba(37,99,235,.4);
    }
    100%{
        text-shadow:0 0 6px rgba(11,30,58,.25);
    }
}

.arabic{
    font-family:'Amiri', serif;
    font-size:42px;
    color:var(--gold);
    text-shadow:
        0 0 12px rgba(244,196,48,.6),
        0 0 30px rgba(37,99,235,.4);
}

/* SATU cursor sahaja */
.arabic::after{
    content:"|";
    position:absolute;
    left:-12px; /* sebab arabic RTL */
    animation:blink 1s infinite;
    color:gold;
}
.rumi{
    font-family:'Poppins', sans-serif;
    font-size:25px;
    color:var(--text-main);
}

/* =========================
   DIVIDER PEMISAH
========================= */

.divider{
    width:100%;
    height:1px;
    margin:8px 0 16px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.25),
        rgba(244,196,48,.6),
        rgba(255,255,255,.25),
        transparent
    );

    border-radius:2px;

    box-shadow:
        0 0 6px rgba(244,196,48,.35);
}

/* =========================
   PREMIUM FORGOT PASSWORD
========================= */

.forgot-wrapper{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin-top:-6px;
    margin-bottom:22px;
}

.forgot-link{
    font-size:13px;
    font-weight:600;
    letter-spacing:.3px;
    color:rgba(255,255,255,.65);
    text-decoration:none;
    padding:6px 12px;
    border-radius:8px;
    transition:all .25s ease;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(10px);
}

/* Hover effect premium */
.forgot-link:hover{
    color:#fff;
    background:rgba(244,196,48,.15);
    box-shadow:
        0 0 12px rgba(244,196,48,.4),
        inset 0 0 0 1px rgba(244,196,48,.4);
    transform:translateY(-2px);
}

/* =========================
   PASSWORD FIELD FIXED PERFECT ALIGN
========================= */

.password-wrapper{
    position:relative;
    width:100%;
    margin-bottom:16px;
}

.password-wrapper input{
    width:100%;
    height:52px;              /* fix height */
    padding:0 50px 0 16px;    /* kanan ruang icon */
    border-radius:14px;
    font-size:14px;
    line-height:52px;         /* paksa text tengah */
}

.toggle-password{
    position:absolute;
    top:0;
    right:14px;
    height:52px;              /* sama dengan input */
    width:40px;

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

    cursor:pointer;
    color:rgba(255,255,255,.45);
    font-size:18px;

    transition:color .2s ease, transform .2s ease;
}

/* Hover TAK guna translateY lagi */
.toggle-password:hover{
    color:var(--gold);
    transform:scale(1.1);
}

/* Active state */
.toggle-password.active{
    color:var(--gold);
}