html,
body.rocker-auth-page {
    min-height: 100%;
}

body.rocker-auth-page {
    margin: 0;
    color: #1d3150;
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}

.public-login-page {
    background:
        radial-gradient(circle at 8% 18%, rgba(124, 164, 255, .14), transparent 24%),
        radial-gradient(circle at 92% 80%, rgba(117, 92, 255, .1), transparent 22%),
        #f5f7fc;
}

.public-login-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    overflow: hidden;
}

.public-login-main::before,
.public-login-main::after {
    position: absolute;
    content: "";
    width: 340px;
    height: 340px;
    border: 1px solid rgba(94, 111, 245, .09);
    border-radius: 50%;
    pointer-events: none;
}

.public-login-main::before {
    top: -210px;
    right: -120px;
}

.public-login-main::after {
    left: -190px;
    bottom: -210px;
}

.public-login-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: clamp(56px, 8vw, 118px);
}

.public-login-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.login-illustration {
    position: relative;
    width: min(520px, 100%);
    height: 320px;
}

.login-art-window {
    position: absolute;
    top: 43px;
    left: 50%;
    width: 390px;
    height: 230px;
    padding: 18px 22px 22px;
    border: 11px solid #53647c;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 0%, #edf2ff 100%);
    box-shadow: 0 30px 50px rgba(49, 69, 112, .18);
    transform: translateX(-50%) rotate(-2deg);
}

.login-art-window::after {
    position: absolute;
    content: "";
    left: 50%;
    bottom: -38px;
    width: 160px;
    height: 28px;
    border-radius: 50%;
    background: rgba(65, 83, 120, .18);
    filter: blur(7px);
    transform: translateX(-50%);
}

.login-art-window-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.login-art-window-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff7a8a;
}

.login-art-window-bar span:nth-child(2) { background: #ffc556; }
.login-art-window-bar span:nth-child(3) { background: #44d2a8; }

.login-art-address {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border-radius: 10px;
    color: #66758b;
    background: #fff;
    box-shadow: 0 8px 20px rgba(64, 86, 130, .09);
    font-size: 13px;
}

.login-art-address i {
    color: #5f70f4;
    font-size: 21px;
}

.login-art-panels {
    display: grid;
    grid-template-columns: 1.15fr .85fr .65fr;
    gap: 10px;
    margin-top: 18px;
}

.login-art-panels span {
    height: 78px;
    border-radius: 11px;
    background: linear-gradient(135deg, #6d7ff8, #8d6bf5);
}

.login-art-panels span:nth-child(2) {
    background: linear-gradient(135deg, #3bc9bc, #2ea9e8);
}

.login-art-panels span:nth-child(3) {
    background: linear-gradient(135deg, #ffbf5b, #ff8f67);
}

.login-art-server {
    position: absolute;
    z-index: 2;
    width: 76px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 16px 30px rgba(64, 73, 120, .2);
}

.login-art-server i { font-size: 37px; }

.login-art-server-left {
    left: 12px;
    top: 132px;
    background: linear-gradient(145deg, #55d2e7, #5c79f5);
    transform: rotate(-7deg);
}

.login-art-server-right {
    right: 7px;
    top: 92px;
    background: linear-gradient(145deg, #56df9d, #35bcd7);
    transform: rotate(7deg);
}

.login-art-shield {
    position: absolute;
    z-index: 3;
    right: 58px;
    bottom: 21px;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border: 7px solid #f5f7fc;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ff8b78, #ff5b89);
    box-shadow: 0 12px 24px rgba(245, 82, 133, .22);
}

.login-art-shield i { font-size: 28px; }

.public-login-brand {
    max-width: 520px;
    margin-top: 18px;
    text-align: center;
}

.public-login-brand h1 {
    margin: 0 0 13px;
    color: #1f3659;
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 700;
}

.public-login-brand p {
    margin: 0 auto;
    max-width: 500px;
    color: #6b7a90;
    font-size: 14px;
    line-height: 1.9;
}

.public-login-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    color: #65758c;
    font-size: 13px;
}

.public-login-features span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.public-login-features i {
    color: #39b98d;
    font-size: 18px;
}

.public-login-panel {
    width: 100%;
    padding: 34px 30px 30px;
    border: 1px solid rgba(92, 108, 151, .06);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(44, 64, 105, .09);
}

.auth-login-heading {
    margin-bottom: 25px;
    text-align: center;
}

.auth-login-eyebrow {
    margin: 0 0 6px !important;
    color: #6b79ef !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.auth-login-heading h2 {
    margin: 0 0 8px;
    color: #243b5c;
    font-size: 27px;
    font-weight: 700;
}

.auth-login-heading p {
    margin: 0;
    color: #8490a3;
    font-size: 13px;
}

.public-login-form {
    display: grid;
    gap: 19px;
}

.rocker-auth-page .form-label {
    margin-bottom: 8px;
    color: #304560;
    font-size: 13px;
    font-weight: 500;
}

.public-login-input {
    position: relative;
}

.public-login-input > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    color: #8996a9;
    font-size: 19px;
    transform: translateY(-50%);
}

.rocker-auth-page .form-control {
    min-height: 45px;
    padding: 10px 13px 10px 43px;
    border-color: #d8deea;
    border-radius: 4px;
    color: #263c5c;
    font-size: 13px;
}

.rocker-auth-page .form-control:focus {
    border-color: #7b89f7;
    box-shadow: 0 0 0 3px rgba(100, 116, 245, .12);
}

.public-login-submit {
    min-height: 45px;
    margin-top: 1px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: linear-gradient(90deg, #6475f4, #6b7af5);
    box-shadow: 0 9px 20px rgba(92, 109, 241, .22);
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease;
}

.public-login-submit:hover,
.public-login-submit:focus {
    color: #fff;
    background: linear-gradient(90deg, #586bf0, #6171f1);
    box-shadow: 0 12px 25px rgba(92, 109, 241, .29);
    transform: translateY(-1px);
}

.register-bind-notice{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:7px;background:#eef5ff;color:#52719a;font-size:12px;line-height:1.5}.register-bind-notice i{flex:0 0 auto;margin:0;color:#0d6efd;font-size:15px;line-height:1}.register-bind-notice span{display:block}

.bind-consent-page{min-height:100vh;margin:0;font-family:"Microsoft YaHei","Segoe UI",Arial,sans-serif;color:#24364b;background:radial-gradient(circle at 12% 18%,rgba(75,128,255,.12),transparent 34%),radial-gradient(circle at 88% 82%,rgba(55,207,163,.1),transparent 30%),#f5f8fd}.bind-consent-main{min-height:100vh;display:grid;place-items:center;padding:24px}.bind-consent-card{width:min(430px,100%);padding:34px;border:1px solid rgba(218,226,238,.9);border-radius:14px;background:#fff;text-align:center;box-shadow:0 18px 55px rgba(41,68,104,.13)}.bind-consent-alert{display:flex;align-items:center;gap:7px;margin:-8px 0 24px;padding:10px 12px;border-radius:7px;color:#137e43;background:#e9f8ef;font-size:13px;text-align:left}.bind-consent-icon{width:66px;height:66px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#13bf68,#08a85a);font-size:33px;box-shadow:0 9px 22px rgba(15,181,98,.24)}.bind-consent-step{display:inline-flex;padding:4px 10px;border-radius:20px;color:#0d6efd;background:#edf4ff;font-size:11px;font-weight:600}.bind-consent-card h1{margin:11px 0 8px;font-size:26px;font-weight:700;color:#1e3149}.bind-consent-desc{margin:0 auto 20px;color:#708094;font-size:14px;line-height:1.75}.bind-consent-account{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid #e4eaf2;border-radius:9px;background:#f8fafc;text-align:left}.bind-consent-account>i{color:#0d6efd;font-size:26px}.bind-consent-account div{min-width:0;display:grid;gap:2px}.bind-consent-account small{color:#8c98a6;font-size:11px}.bind-consent-account strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#35465b;font-size:14px}.bind-consent-security{display:flex;align-items:center;justify-content:center;gap:6px;margin:15px 0;color:#7c8998;font-size:12px}.bind-consent-security i{color:#13b86a;font-size:16px}.bind-consent-submit{height:46px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;color:#fff;background:linear-gradient(135deg,#13bf68,#08a85a);font-size:15px;font-weight:600;box-shadow:0 7px 18px rgba(15,181,98,.2);transition:.18s}.bind-consent-submit:hover{color:#fff;transform:translateY(-1px);box-shadow:0 10px 23px rgba(15,181,98,.25)}.bind-consent-cancel{display:inline-block;margin-top:15px;color:#8491a0;font-size:13px}.bind-consent-cancel:hover{color:#0d6efd}@media(max-width:575.98px){.bind-consent-main{padding:16px}.bind-consent-card{padding:27px 20px}.bind-consent-card h1{font-size:23px}}

.public-login-register {
    margin: 24px 0 0;
    color: #7b879a;
    font-size: 13px;
}

.public-login-register a {
    color: #6173f2;
    text-decoration: none;
}

.public-login-register a:hover { text-decoration: underline; }

.public-login-register button {
    display: inline;
    padding: 0;
    border: 0;
    color: #6173f2;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.public-login-register button:hover { text-decoration: underline; }

.auth-mode-view[hidden] { display: none !important; }

.auth-login-separator {
    position: relative;
    margin: 29px 0 20px;
    text-align: center;
}

.auth-login-separator::before,
.auth-login-separator::after {
    position: absolute;
    top: 50%;
    width: 22%;
    height: 1px;
    content: "";
    background: #dbe1eb;
}

.auth-login-separator::before { left: 0; }
.auth-login-separator::after { right: 0; }

.auth-login-separator span {
    color: #a4afbe;
    font-size: 12px;
}

.rainbow-login-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.rainbow-login-action a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #18b568;
    box-shadow: 0 8px 18px rgba(24, 181, 104, .2);
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.rainbow-login-action a:hover {
    color: #fff;
    background: #10a85e;
    transform: translateY(-2px);
}

.rainbow-login-action i { font-size: 24px; }

.rainbow-login-action span {
    color: #8793a5;
    font-size: 11px;
}

.rocker-auth-page .alert {
    border-radius: 4px;
    font-size: 13px;
}

@media (max-width: 991.98px) {
    .public-login-main {
        padding: 56px 20px 34px;
    }

    .public-login-shell {
        width: min(430px, 100%);
        display: block;
    }

    .public-login-showcase {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .public-login-main {
        align-items: flex-start;
        padding: 34px 12px 24px;
    }

    .public-login-panel {
        padding: 29px 20px 25px;
    }

    .auth-login-heading h2 {
        font-size: 24px;
    }
}

/* Admin sign-in keeps the compact Rocker card layout. */
body.bg-login.rocker-auth-page {
    color: #212529;
}

body.bg-login .section-authentication-signin {
    min-height: 100vh;
    height: auto;
    padding: 35px 16px;
}

body.bg-login .auth-login-shell {
    flex: 0 1 620px;
    width: 100%;
    max-width: 620px;
}

body.bg-login .auth-login-card {
    margin: 0;
    border: 1px solid rgba(13, 110, 253, .08);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(42, 69, 100, .13);
}

body.bg-login .auth-login-card .card-body {
    padding: 16px;
}

body.bg-login .auth-login-inner {
    padding: 30px 24px 25px;
    border-color: #d7dde5 !important;
}

body.bg-login .auth-login-heading {
    margin-bottom: 24px;
}

body.bg-login .auth-login-heading h3 {
    margin: 0 0 7px;
    color: #2b2f33;
    font-size: 28px;
    font-weight: 500;
}

body.bg-login .auth-login-heading p {
    margin: 0;
    color: #68727e;
    font-size: 14px;
}

body.bg-login .auth-login-separator {
    position: relative;
    margin: 2px 0 25px;
}

body.bg-login .auth-login-separator::before,
body.bg-login .auth-login-separator::after {
    display: none;
}

body.bg-login .auth-login-separator span {
    position: relative;
    top: 11px;
    z-index: 1;
    padding: 0 10px;
    color: #b1b8c0;
    background: #fff;
    font-size: 12px;
}

body.bg-login .auth-login-separator hr {
    margin: 0;
    color: #cfd5dc;
}

body.bg-login .form-label {
    margin-bottom: 7px;
    color: #333b44;
    font-size: 14px;
}

body.bg-login .form-control {
    min-height: 42px;
    padding: .375rem .75rem;
    border-color: #cfd6de;
    border-radius: 4px;
    font-size: 14px;
}

body.bg-login .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .13);
}

body.bg-login .auth-login-submit {
    margin-top: 25px;
}

body.bg-login .auth-login-submit .btn {
    min-height: 40px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    body.bg-login .section-authentication-signin {
        padding: 18px 10px;
    }

    body.bg-login .auth-login-card .card-body {
        padding: 11px;
    }

    body.bg-login .auth-login-inner {
        padding: 25px 18px 21px;
    }

    body.bg-login .auth-login-heading h3 {
        font-size: 24px;
    }
}