html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow: hidden;
}

.login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-bg-layer1,
.login-bg-layer2 {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.login-bg-layer1 { background-image: url('../images/login-bg.png'); z-index: 1; }
.login-bg-layer2 { background-image: url('../images/login-bg2.png'); opacity: 0.6; z-index: 2; }

.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.7) 0%, rgba(0, 119, 190, 0.7) 100%);
    z-index: 3;
}

.login-box {
    position: relative;
    z-index: 4;
    width: 580px;
    padding: 54px 60px;
    border-radius: 24px;
    background: linear-gradient(150deg, rgba(20, 108, 179, 0.96), rgba(19, 147, 179, 0.9));
    box-shadow: 0 32px 60px rgba(7, 35, 74, 0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.login-card {
    width: 100%;
}

.brand { margin-bottom: 34px; }
.brand-logo { display: flex; align-items: center; gap: 18px; }
.brand-logo-img { width: 72px; height: 72px; }
.brand-name { font-size: 34px; color: #ffffff; line-height: 1; }
.brand-name span:first-child { color: #00ffff; }
.brand-text { color: #ffffff; font-size: 14px; opacity: 0.9; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 0; }
.form-group label { display: block; color: #ffffff; margin-bottom: 8px; font-size: 14px; letter-spacing: 0.05em; }

.form-control {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.6px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #ffffff;
    font-size: 15px;
}

.form-control::placeholder { color: rgba(248, 250, 252, 0.75); }
.form-control:focus { outline: none; border-color: #ffffff; background: rgba(255, 255, 255, 0.07); }

.remember-me { display: flex; align-items: center; gap: 10px; margin: 26px 0 30px; color: #ffffff; }
.remember-me input[type='checkbox'] { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, 0.6); accent-color: #ffffff; }

.btn-login { width: 100%; padding: 15px; border-radius: 16px; border: none; font-size: 17px; font-weight: 600; background: #ffffff; color: #0f4c81; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 22px 30px rgba(10, 70, 122, 0.25); }

.forgot-password { display: block; margin-top: 22px; text-align: center; color: rgba(248, 250, 252, 0.82); text-decoration: none; font-size: 13px; }
.forgot-password:hover { color: #ffffff; }

.error-message {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 96, 96, 0.2);
    color: #ffe0e5;
    font-size: 13px;
}

.success-message {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #d1fae5;
    font-size: 13px;
}

@media (max-width: 992px) {
    .login-box { width: 92%; padding: 44px 32px; }
    .form-row { grid-template-columns: 1fr; }
}