*{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        html, body{
            height:90%;
        }

        body{
            min-height:100vh;
            min-height:100dvh; /* mobile-safe viewport height (accounts for address bar) */
            overflow-x:hidden;
            background:url('../image/bground.jpg') no-repeat center center/cover;
            background-attachment: fixed;
            position:relative;
        }

        /* DARK OVERLAY */
        body::before{
            content:'';
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.35);
            z-index:1;
        }

        /* TOP HEADER */
        .top-header{
            position:relative;
            z-index:1;
            width:100%;
            background:#f1f1f1;
            border-radius:0 0 20px 20px;
            padding:20px 20px;
            display:flex;
            align-items:center;
            gap:20px;
            flex-wrap:nowrap; /* keep logo and text side by side, never stack */
        }

        .top-header img{
            width:90px;
            height:90px;
            object-fit:contain;
            flex-shrink:0;
        }

        .school-text{
            min-width:0; /* lets the text box shrink/wrap on its own instead of pushing below the logo */
        }

        .school-text h1{
            overflow-wrap:break-word;
        }

        .school-text h1{
            font-size:30px;
            font-weight:bold;
            color:#222;
            font-family: 'Times New Roman', Times, serif;
        }

        .school-text p{
            font-size:15px;
            color:#333;
            margin-top:5px;
            font-family: 'Times New Roman', Times, serif;
        }

        /* MAIN CONTENT */
        .main-container{
            position:relative;
            z-index:2;
            min-height:calc(100vh - 120px);
            min-height:calc(100dvh - 120px);
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding:20px 15px;
        }

        .welcome-text{
            font-size:50px;
            color:white;
            font-weight:300;
            margin-bottom:40px;
            font-family: 'Times New Roman', Times, serif;
            text-align:center;
        }

        /* LOGIN CARD */
        .login-box{
            width:430px;
            max-width:100%;
            padding:35px;
            border-radius:20px;
            background:rgba(255,255,255,0.15);
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
            box-shadow:0 8px 32px rgba(0,0,0,0.3);
        }

        .login-box h2{
            text-align:center;
            font-size:35px;
            font-weight:300;
            margin-bottom:30px;
            color:#ffffff;
            font-family: 'Courier New', Courier, monospace;
        }

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

        .input-group label{
            display:block;
            margin-bottom:10px;
            font-size:20px;
            font-weight:bold;
            color:#ffffffec;
            font-family: 'Courier New', Courier, monospace;
        }

        .input-group input{
            width:100%;
            padding:18px;
            border:none;
            border-radius:8px;
            font-size:18px;
            outline:none;
        }

        .forgot{
            text-align:right;
            margin-bottom:18px;
        }

        .forgot a{
            color:white;
            text-decoration:none;
            font-size:13px;
        }

        .forgot a:hover{
            text-decoration:underline;
        }

        .login-btn{
            width:100%;
            padding:15px;
            border:none;
            border-radius:8px;
            background:#2456ff;
            color:white;
            font-size:25px;
            cursor:pointer;
            transition:0.3s;
            font-family: 'Times New Roman', Times, serif;
        }

        .login-btn:hover{
            background:#1b45d1;
        }

        .create-account{
            text-align:center;
            margin-top:15px;
        }

        .create-account a{
            color:white;
            text-decoration:none;
            font-size:18px;
            font-family: 'Courier New', Courier, monospace;
        }

        .create-account a:hover{
            text-decoration:underline;
        }

        /* RESPONSIVE */
        @media(max-width:768px){

            .top-header{
                padding:15px;
            }

            .top-header img{
                width:55px;
                height:55px;

            }

            .school-text h1{
                font-size:20px;
            }

            .school-text p{
                font-size:14px;
            }

            .welcome-text{
                font-size:32px;
                text-align:center;
                margin-bottom:25px;
            }

            .login-box{
                width:90%;
                padding:25px;
            }

            .login-box h2{
                font-size:32px;
            }

            .input-group label{
                font-size:16px;
            }

            .login-btn{
                font-size:20px;
            }
        }

        @media(max-width:400px){
            .top-header{
                padding:12px 10px;
                gap:10px;
            }

            .school-text h1{
                font-size:14px;
            }

            .school-text p{
                font-size:11px;
            }

            .top-header img{
                width:45px;
                height:45px;
            }

            .login-box{
                padding:20px;
            }
        }

        /* Itago yung native Edge reveal-password icon para isa lang ang lalabas */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.password-field-wrapper {
    position: relative;
}
.password-field-wrapper input {
    padding-right: 44px;
}
.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: #555;
    font-size: 18px;
    line-height: 1;
    display: none; /* hidden by default, walang laman pa */
}
.toggle-password.visible {
    display: block;
}