*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    min-height:100vh;

    background-image:
    url('../images/bg.jpg');

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;
}

.container{

    width:100%;

    max-width:520px;

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(8px);

    border-radius:20px;

    padding:35px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);

}

h1{

    color:#1e293b;

    margin-bottom:20px;

    text-align:center;

}

.alert-warning{

    background:#fff7ed;

    border-left:5px solid #f97316;

    padding:15px;

    border-radius:10px;

    margin-bottom:20px;

    line-height:1.6;

    color:#9a3412;

}

.notice-title{

    font-weight:700;

    margin-bottom:6px;

}

label{

    display:block;

    font-weight:600;

    color:#334155;

    margin-bottom:7px;

}

input[type=text],
input[type=email]{

    width:100%;

    padding:14px;

    border:1px solid #d1d5db;

    border-radius:10px;

    margin-bottom:15px;

    font-size:15px;

}

input:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);

}

.checkbox{

    display:flex;

    gap:10px;

    margin-bottom:20px;

    align-items:flex-start;

}

.checkbox input{

    width:auto;

    margin-top:4px;

}

.checkbox label{

    font-size:14px;

    line-height:1.5;

    font-weight:400;

}

button{

    width:100%;

    background:#2563eb;

    color:white;

    border:none;

    padding:15px;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#1d4ed8;

}

@media(max-width:768px){

    body{

        justify-content:center;

        padding:20px;

        background-position:right center;

    }

    .container{

        max-width:100%;

    }

}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', sans-serif;
}

body{
    min-height:100vh;

    /* Flexbox centering for body */
    display:flex;

    justify-content:center;

    align-items:center;

    background-image:
    url('../images/bg.jpg');

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;
}

/* Centered Glassmorphism Container */
.container{

    width:auto;

    max-width:600px;

    background:rgba(15, 23, 42, 0.45);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255, 255, 255, 0.2);

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.35);

}

h1{

    color:#ffffff;

    font-size:28px;

    margin-bottom:25px;

    text-align:center;

    letter-spacing:1px;

    text-shadow:0 2px 10px rgba(0, 0, 0, 0.3);

}

.nav-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

/* Transparent Square Buttons */
.square-btn{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:140px;

    height:140px;

    background:rgba(255, 255, 255, 0.08);

    color:#ffffff;

    text-decoration:none;

    border-radius:20px;

    border:1.5px solid rgba(255, 255, 255, 0.25);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);

    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.35s ease;

}

.square-btn i{

    font-size:36px;

    transition:transform 0.35s ease, color 0.3s ease;

}

.square-btn span{

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

/* Hover Effect */
.square-btn:hover{

    transform:scale(1.08) translateY(-8px);

    background:rgba(37, 99, 235, 0.35);

    border-color:rgba(96, 165, 250, 0.9);

    box-shadow:
        0 15px 30px rgba(37, 99, 235, 0.45),
        0 0 20px rgba(96, 165, 250, 0.3);

}

.square-btn:hover i{

    transform:scale(1.15) rotate(-3deg);

    color:#93c5fd;

}

.square-btn:active{

    transform:scale(1.02) translateY(-2px);

}

@media(max-width:768px){

    body{

        padding:20px;

    }

    .container{

        width:100%;

        padding:25px;

    }

    .nav-grid{

        gap:12px;

    }

    .square-btn{

        width:100px;

        height:100px;

    }

    .square-btn i{

        font-size:26px;

    }

    .square-btn span{

        font-size:11px;

    }

}
.back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 8px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.back-home-btn:hover {
    background: rgba(37, 99, 235, 0.4);
    border-color: rgba(96, 165, 250, 0.8);
    transform: translateX(-3px);
}