.login-page {
    --bg: #101211;
    --line: #30413a;
    --text: #f1faf5;
    --muted: #adbbb4;
    --mint: #00d995;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--bg);
}

.login-page > header.bar {
    min-height: 68px;
    gap: 8px 16px;
    padding-block: 10px;
    border-color: #ffffff15;
}
.login-page .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.login-page .brand .mark {
    display: grid;
    place-items: center;
    width: 29px;
    aspect-ratio: 1;
    border-radius: 9px;
    background: #143023;
    font-size: 18px;
}
.login-brand-cn {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 500;
}
.login-page .login-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: .875rem;
    white-space: nowrap;
}
.login-page .inline-form button { padding: 6px 10px; }
.login-page .bar nav { gap: 8px 14px; }

.login-stage {
    position: relative;
    isolation: isolate;
    flex: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(24px, 6vw, 68px) 14px;
    background: radial-gradient(ellipse at 50% 47%, #10382b, transparent 72%);
}
.login-map {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.login-map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .88;
}
.login-card {
    width: min(100%, 382px);
    min-width: 0;
    padding: 27px clamp(18px, 5vw, 26px) 20px;
    border: 1px solid #315448;
    border-radius: 17px;
    background: #111c17;
    box-shadow: 0 16px 70px #0009, 0 0 42px #18d29516;
}
.login-card .portal-heading { text-align: center; }
.login-card .portal-heading h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 22px;
}
.login-card .portal-heading .eyebrow {
    margin: 0 0 8px;
    font-size: .75rem;
}
.login-card .feedback {
    margin-bottom: 16px;
    overflow-wrap: anywhere;
    background: #182721;
    font-size: .875rem;
}
.login-card .auth-panel {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.login-card .auth-panel label {
    color: #e3ede7;
    margin-bottom: 12px;
    font-size: .875rem;
    font-weight: 600;
}
.login-card .auth-panel input {
    min-height: 45px;
    min-width: 0;
    padding: 9px 12px;
    border-color: var(--line);
    border-radius: 8px;
    background: #0d1511;
    font-size: 1rem;
    font-weight: 400;
}
.login-card input::placeholder { color: #8a9d92; }
.login-card .login-password label { margin-bottom: 4px; }
.login-password-field { position: relative; }
.login-card .login-password-field:has(button:not([hidden])) input { padding-inline-end: 85px; }
.login-password-toggle {
    position: absolute;
    inset: 1px 1px 1px auto;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}
.login-password-toggle:hover { color: var(--mint); }
.login-card .auth-links {
    justify-content: space-between;
    margin: 5px 0 11px;
    padding: 0;
    border: 0;
    gap: 0 12px;
    font-size: .8125rem;
}
.login-card .auth-links a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: var(--muted);
    text-decoration: none;
}
.login-card .auth-links a:hover { color: var(--mint); }
.login-submit {
    width: 100%;
    min-height: 45px;
    border-radius: 99px;
    color: #061a12;
    box-shadow: 0 4px 20px #00d99530;
}
.login-card .login-signup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: 8px 0 0;
    font-size: .8125rem;
}
.login-card .login-signup a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    color: var(--mint);
}
.login-card .login-signup a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .login-map { inset-inline: -72%; }
}
@media (max-width: 370px) {
    .login-page .brand { gap: 6px; font-size: .875rem; }
    .login-page .login-back { font-size: .8125rem; }
}