*{
        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;
        background:#ffffff;
        padding:20px;
    }

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

    .container{
        width:100%;
        max-width:420px;
        background:#980000;
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        border:1px solid rgba(255,255,255,.2);
        border-radius:25px;
        overflow:hidden;
        padding:35px 30px;
        box-shadow:0 15px 40px rgba(0,0,0,.35);
        animation:fadeIn .5s ease;
    }

    /* TOP BAR */

    .top-bar{
        width:70px;
        height:5px;
        background:linear-gradient(135deg,#ffffff,#ffe5e5);
        border-radius:50px;
        margin:auto;
        margin-bottom:25px;
    }

    /* MESSAGE */

    .msg-box{
        display:none;
        padding:12px;
        border-radius:12px;
        margin-bottom:20px;
        font-size:.9rem;
        text-align:center;
        font-weight:500;
        animation:shake .3s ease;
    }

    .msg-box.success{
        display:block;
        background:#e8f5e9;
        color:#2e7d32;
    }

    .msg-box.error{
        display:block;
        background:#ffebee;
        color:#c62828;
    }

    @keyframes shake{
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }

    /* =========================
       TABS
    ========================= */

    .tabs{
        display:flex;
        background:rgba(255,255,255,.15);
        padding:5px;
        border-radius:50px;
        margin-bottom:30px;
        gap:5px;
    }

    .tabBtn{
        flex:1;
        border:none;
        padding:12px;
        border-radius:50px;
        cursor:pointer;
        background:transparent;
        color:#fff;
        font-weight:700;
        font-size:.8rem;
        transition:.3s;
    }

    .tabBtn.active{
        background:linear-gradient(135deg,#3a3a3a,#6b6b6b);
        box-shadow:0 5px 15px rgba(0,0,0,.25);
    }

    /* =========================
       FORM
    ========================= */

    .form{
        display:none;
        animation:fade .3s ease;
    }

    .form.active{
        display:block;
    }

    @keyframes fade{
        from{
            opacity:0;
            transform:translateY(10px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    .logo{
        text-align:center;
        margin-bottom:25px;
    }

    .logo img{
        width:85px;
        margin-bottom:12px;
    }

    .logo h2{
        color:#fff;
        font-size:2rem;
        margin-bottom:5px;
        font-weight:700;
    }

    .logo p{
        color:rgba(255,255,255,.8);
        font-size:.92rem;
    }

    /* =========================
       INPUTS
    ========================= */

    .input-group{
        margin-bottom:18px;
    }

    .input-group input{
        width:100%;
        padding:14px 15px;
        border:none;
        outline:none;
        border-radius:14px;
        background:rgba(255,255,255,.15);
        color:#fff;
        font-size:.95rem;
        transition:.3s;
        border:1px solid rgba(255,255,255,.1);
    }

    .input-group input::placeholder{
        color:rgba(255,255,255,.7);
    }

    .input-group input:focus{
        border-color:#fff;
        background:rgba(255,255,255,.2);
        box-shadow:0 0 0 4px rgba(255,255,255,.12);
    }

    .input-group input.error-input{
        background:rgba(255,100,100,.25);
        border-color:rgba(255,100,100,.8);
    }

    /* =========================
       BUTTON
    ========================= */

    .btn{
        width:100%;
        padding:14px;
        border:none;
        border-radius:14px;
        background:linear-gradient(135deg,#3a3a3a,#6b6b6b);
        color:#fff;
        font-size:1rem;
        font-weight:700;
        cursor:pointer;
        transition:.3s;
        margin-top:5px;
    }

    .btn:hover{
        transform:translateY(-2px);
        box-shadow:0 10px 20px rgba(0,0,0,.25);
    }

    /* =========================
       LINKS
    ========================= */

    .links{
        text-align:center;
        margin-top:20px;
        font-size:.9rem;
    }

    .links a{
        color:#fff;
        text-decoration:none;
        transition:.3s;
        font-weight:500;
    }

    .links a:hover{
        color:#ffe5e5;
    }

    /* =========================
       ANIMATION
    ========================= */

    @keyframes fadeIn{
        from{
            opacity:0;
            transform:scale(.95);
        }
        to{
            opacity:1;
            transform:scale(1);
        }
    }

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

    @media(max-width:500px){

        .container{
            padding:30px 20px;
        }

        .logo h2{
            font-size:1.7rem;
        }

        .tabBtn{
            font-size:.72rem;
            padding:10px;
        }
    }
    .password-group{ position:relative; }
    .password-group input[type="password"],
    .password-group input[type="text"]{ padding-right:42px; width:100%; }
    .toggle-eye{
        position:absolute;
        top:50%;
        right:12px;
        transform:translateY(-50%);
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#888;
        user-select:none;
    }
    .toggle-eye:hover{ color:#333; }
    .toggle-eye svg{ width:20px; height:20px; }
        /* Password show/hide eye toggle — scoped here so it doesn't depend on
       assets/login.css being touched. Safe to move into login.css later. */
    .password-group{ position:relative; }
    .password-group input[type="password"],
    .password-group input[type="text"]{ padding-right:42px; width:100%; }
    .toggle-eye{
        position:absolute;
        top:50%;
        right:12px;
        transform:translateY(-50%);
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#888;
        user-select:none;
    }
    .toggle-eye:hover{ color:#333; }
    .toggle-eye svg{ width:20px; height:20px; }