/* ===============================
   GLOBAL PAGE CONTENT FIX
   =============================== */

/* all pages main background transparent */
body {
    background: transparent !important;
    color: #ffffff;
}

/* page wrapper (content area) */
.page-content,
.content,
.main-content {
    max-width: 1100px;
    margin: 80px auto;
    padding: 40px;
    background: rgba(0,0,0,0.55);   /* glass effect */
    backdrop-filter: blur(10px);
    border-radius: 14px;
    color: #ffffff;
    z-index: 2;
    position: relative;
}

/* headings */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    color: #ffffff;
    margin-bottom: 16px;
}

/* paragraphs & lists */
.page-content p,
.page-content li {
    color: #dddddd;
    line-height: 1.8;
    font-size: 15px;
}

/* links */
.page-content a {
    color: #ffffff;
    text-decoration: underline;
}

/* footer fix */
footer {
    color: #cccccc;
    z-index: 2;
    position: relative;
}

/* particles always behind */
#particles-js {
    z-index: 0 !important;
}






<style>
/* ----------- layout ----------- */
.auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;background:#f4f6fb}



.auth-box{
    width:440px;
    background:#ffffff;           /* 🔥 PURE WHITE */
    padding:34px;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    position:relative;
    z-index:2;                    /* 🔥 particles ke upar */
}



/* ----------- tabs ----------- */
.tabs{display:flex;margin-bottom:25px}
.tab{flex:1;padding:12px;border:none;font-weight:600;border-radius:12px;
cursor:pointer;background:#eee}
.tab.active{background:#000;color:#fff}

/* ----------- inputs ----------- */
input{width:100%;padding:14px;margin-bottom:14px;border-radius:12px;
border:1px solid #ddd;font-size:14px}

/* ----------- buttons ----------- */
.btn{width:100%;padding:14px;border:none;border-radius:14px;
background:#000;color:#fff;font-weight:600}

/* ----------- eye ----------- */
.eye{position:absolute;right:14px;top:14px;width:22px;height:22px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M1 12C3.5 7 7.5 4 12 4s8.5 3 11 8c-2.5 5-6.5 8-11 8S3.5 17 1 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
cursor:pointer}
.eye.on{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M1 12C3.5 7 7.5 4 12 4s8.5 3 11 8c-2.5 5-6.5 8-11 8S3.5 17 1 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E") no-repeat center}

/* ----------- messages ----------- */
.msg{color:#2e7d32;text-align:center;margin-bottom:12px}
.err{color:#c62828;text-align:center;margin-bottom:12px}

/* ----------- password meter ----------- */
.pw-meter{height:6px;background:#eee;border-radius:6px;margin:-6px 0 14px;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0%;transition:.3s}

/* ----------- match ----------- */
.match{font-size:13px;margin:-6px 0 10px}
.match.ok{color:#2e7d32}
.match.no{color:#c62828}



/* ----------- auth logo ----------- */
.auth-logo{
    text-align:center;
    font-size:32px;
    font-weight:900;
    letter-spacing:1px;
    margin-bottom:18px;
    user-select:none;
}

.auth-logo .slash{
    color:#000;
}

.auth-logo .up{
    color:#e53935;
}



.auth-wrap{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent; /* 🔥 particles visible */
    position:relative;
    z-index:1;
}




</style>