@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', 'Roboto', sans-serif;
}

/* ---------- Full-page gradient backdrop ---------- */
.top-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b3f6b 0%, #1563b0 45%, #2d9cdb 100%);
    background-attachment: fixed;
}

.top-content::before,
.top-content::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(95px);
    opacity: 0.5;
    pointer-events: none;
}

.top-content::before {
    width: 480px;
    height: 480px;
    background: #6ee7b7;
    top: -140px;
    left: -120px;
}

.top-content::after {
    width: 420px;
    height: 420px;
    background: #fcd9a4;
    bottom: -150px;
    right: -110px;
}

.backstretch:after {
    background-color: rgba(11, 63, 107, 0.55) !important;
}

.inner-bg {
    background: transparent;
    padding: 60px 0;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* ---------- Center the card when no notice panel is shown ---------- */
.form-box.col-md-offset-3 {
    float: none;
    margin: 0 auto;
    width: 460px;
    max-width: 100%;
}

/* ---------- Login card ---------- */
.loginbg {
    background: #ffffff;
    max-height: none;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(11, 63, 107, 0.30);
    position: relative;
    overflow: visible;
}

.loginbg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, #2d9cdb, #6ee7b7, #2d9cdb);
    background-size: 200% 100%;
}

/* ---------- Card header / logo ---------- */
.form-top {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    text-align: center;
    padding: 42px 40px 8px;
}

.form-top-left {
    float: none;
    width: auto;
    padding-top: 0;
}

.form-top-left img {
    max-height: 64px;
    max-width: 230px;
    height: auto;
    display: inline-block;
    background: #ffffff;
    padding: 10px 22px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(11, 63, 107, 0.16);
}

.form-top-right {
    display: none;
}

/* ---------- Form body ---------- */
.form-bottom {
    background: transparent;
    border-radius: 0;
    text-align: center;
    padding: 22px 40px 34px;
}

.form-bottom h3 {
    color: #0b3f6b;
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 20px;
    letter-spacing: 0.2px;
}

.form-bottom .form-group {
    text-align: left;
    margin-bottom: 18px;
}

.form-bottom input[type="text"],
.form-bottom input[type="password"],
.form-bottom input[type="email"],
.form-bottom .form-control {
    height: 50px;
    margin: 0;
    padding: 12px 18px;
    border: 1.5px solid #e2e8f2;
    background: #f6f9fd;
    border-radius: 12px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: #10375c;
    box-shadow: none;
    transition: border-color .25s, box-shadow .25s, background-color .25s;
}

.form-bottom input[type="text"]:focus,
.form-bottom input[type="password"]:focus,
.form-bottom input[type="email"]:focus,
.form-bottom .form-control:focus {
    outline: 0;
    background: #ffffff;
    border-color: #2d9cdb;
    box-shadow: 0 0 0 4px rgba(45, 156, 219, 0.16);
}

.form-bottom input[type="text"]::-webkit-input-placeholder,
.form-bottom input[type="password"]::-webkit-input-placeholder,
.form-bottom input[type="email"]::-webkit-input-placeholder,
.form-bottom .form-control::-webkit-input-placeholder {
    color: #9aa9bd;
}

.form-bottom input[type="text"]:-moz-placeholder,
.form-bottom input[type="password"]:-moz-placeholder,
.form-bottom input[type="email"]:-moz-placeholder,
.form-bottom .form-control:-moz-placeholder {
    color: #9aa9bd;
}

.form-bottom input[type="text"]::-moz-placeholder,
.form-bottom input[type="password"]::-moz-placeholder,
.form-bottom input[type="email"]::-moz-placeholder,
.form-bottom .form-control::-moz-placeholder {
    color: #9aa9bd;
}

.form-bottom input[type="text"]:-ms-input-placeholder,
.form-bottom input[type="password"]:-ms-input-placeholder,
.form-bottom input[type="email"]:-ms-input-placeholder,
.form-bottom .form-control:-ms-input-placeholder {
    color: #9aa9bd;
}

/* ---------- Sign in button ---------- */
.form-bottom button.btn {
    width: 100%;
    height: 52px;
    line-height: 52px;
    margin: 4px 0 0;
    padding: 0;
    background: linear-gradient(135deg, #0b3f6b, #2d9cdb);
    border: 0;
    border-radius: 12px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    box-shadow: 0 14px 28px rgba(11, 63, 107, 0.30);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.form-bottom button.btn:hover,
.form-bottom button.btn:focus,
.form-bottom button.btn:active,
.form-bottom button.btn.active {
    outline: 0;
    color: #fff;
    opacity: 1;
    background: linear-gradient(135deg, #09355a, #2388c9);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(11, 63, 107, 0.38);
}

/* ---------- Forgot password ---------- */
.form-bottom a.forgot {
    display: inline-block;
    margin-top: 20px;
    padding: 0;
    color: #2d9cdb;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}

.form-bottom a.forgot:hover,
.form-bottom a.forgot:focus {
    color: #0b3f6b;
    text-decoration: none;
    font-weight: 500;
}

/* ---------- Messages ---------- */
.loginbg .alert {
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    text-align: left;
    padding: 11px 16px;
    margin-bottom: 16px;
}

.loginbg .alert-danger {
    background: #fdecec;
    color: #c0392b;
}

.loginbg .alert-success {
    background: #e8f8f2;
    color: #148059;
}

/* ---------- Captcha ---------- */
.form-bottom .has-feedback .col-md-6 {
    padding-left: 5px;
    padding-right: 5px;
}

.form-bottom .glyphicon-refresh {
    color: #9aa9bd;
    cursor: pointer;
}

/* ---------- Notice / "What's new" panel ---------- */
.separatline {
    background: rgba(255, 255, 255, 0.45);
}

.loginright.form-box {
    margin-top: 0;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #ffffff;
    border-radius: 20px;
    padding: 28px 32px;
    max-height: none;
    height: auto;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: auto;
}

.loginright.form-box h3 {
    color: #ffffff;
    font-weight: 600;
    font-size: 22px;
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.loginright.form-box h4 {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    margin: 16px 0 6px;
}

.loginright.form-box p {
    color: rgba(255, 255, 255, 0.92);
    line-height: 20px;
    font-size: 14px;
}

.logdivider {
    background: rgba(255, 255, 255, 0.3);
    margin: 14px 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
    .row {
        align-items: center;
    }
}

@media (max-width: 767px) {
    .form-box.col-md-offset-3 {
        margin-left: 0;
        width: 100%;
    }

    .form-top {
        padding: 32px 24px 6px;
    }

    .form-bottom {
        padding: 18px 24px 28px;
    }

    .loginright.form-box {
        margin-top: 20px;
    }
}