body.login-page {
    --login-ink: #11253d;
    --login-muted: #64748b;
    --login-line: #e1e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 100%;
    min-height: 100dvh;
    height: auto;
    padding: clamp(1rem, 5vh, 3.5rem) 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: radial-gradient(ellipse at 12% 15%, #dcecff 0, transparent 48%), radial-gradient(ellipse at 95% 90%, #d9e7f6 0, transparent 45%), #f0f5fb;
    color: var(--login-ink);
}
body.login-page::before { position: fixed; background: none; }
body.login-page .system-status-banner { top: 0; left: 0; right: 0; border-radius: 0; }
body.login-page.has-system-status-banner { padding-top: 7rem; }
.login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(62rem, 100%);
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1.65rem;
    background: #fff;
    box-shadow: 0 28px 80px -24px rgba(26, 54, 88, .28), 0 4px 16px rgba(26, 54, 88, .04);
    overflow: hidden;
}
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3.5rem;
    min-width: 0;
    padding: 2.5rem;
    background: radial-gradient(ellipse at 105% 100%, #125ca0 0, transparent 65%), linear-gradient(145deg, #07192d, #0c2e50);
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}
.login-brand::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 20rem;
    height: 20rem;
    right: -11rem;
    bottom: 1rem;
    border: 3rem solid rgba(69, 161, 255, .09);
    border-radius: 50%;
    pointer-events: none;
}
.login-wordmark { align-self: flex-start; width: min(100%, 18rem); padding: .55rem .8rem; background: #fff; border-radius: .75rem; box-sizing: border-box; }
.login-logo { display: block; width: 100%; height: auto; }
.login-eyebrow { display: block; margin-bottom: 1rem; font-size: .63rem; font-weight: 600; letter-spacing: .15em; color: #95caff; line-height: 1.7; }
.login-brand h2 { color: #fff; margin: 0; font-size: clamp(1.8rem, 3.3vw, 2.7rem); line-height: 1.18; letter-spacing: -.045em; font-weight: 650; }
.login-brand h2 span { color: #65b3ff; }
.login-brand-message > p { color: #c0d0e2; margin: 1.4rem 0 0; line-height: 1.7; font-size: .9rem; }
.login-brand-topics { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-top: 1.8rem; font-size: .7rem; color: #c9dcef; }
.login-brand-topics span { display: inline-flex; align-items: center; gap: .4rem; }
.login-brand-topics i { color: #65b3ff; }
.login-maker { display: block; width: 7.7rem; max-width: 100%; align-self: flex-start; padding: .35rem .5rem; border-radius: .45rem; background: #fff; }
.login-maker img { display: block; width: 100%; height: auto; }
.login-container { display: flex; flex-direction: column; justify-content: center; gap: 2rem; min-width: 0; padding: 2.5rem; box-sizing: border-box; }
.login-container form { margin: 0; min-width: 0; }
.login-workspace { display: flex; align-items: center; gap: .85rem; padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--login-line); min-width: 0; }
.login-workspace > div:last-child { min-width: 0; }
.login-workspace-label { display: block; font-size: .6rem; font-weight: 650; letter-spacing: .13em; color: var(--login-muted); margin-bottom: .35rem; }
.login-workspace strong { display: block; font-size: .95rem; overflow-wrap: anywhere; line-height: 1.4; font-weight: 650; }
.login-organisation { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; width: 5.25rem; min-width: 2.5rem; min-height: 3.1rem; padding: .4rem; border: 1px solid var(--login-line); background: #fff; border-radius: .6rem; box-sizing: border-box; }
.login-companylogo { display: block; max-width: 100%; max-height: 2.6rem; width: auto; height: auto; object-fit: contain; }
.login-heading h1 { color: var(--login-ink); font-size: clamp(1.5rem, 2.5vw, 1.85rem); font-weight: 650; line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.login-heading p { margin: .6rem 0 1.8rem; color: var(--login-muted); font-size: .87rem; line-height: 1.5; }
.login-field { margin-bottom: 1.15rem; }
.login-field label { display: block; color: var(--login-ink); font-size: .8rem; font-weight: 600; margin-bottom: .5rem; cursor: pointer; }
.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: #8293a8; pointer-events: none; font-size: .85rem; }
body.login-page .login-input { display: block; width: 100%; box-sizing: border-box; min-height: 2.9rem; margin: 0; padding: .8rem .8rem .8rem 2.5rem !important; font-size: .85rem; line-height: 1.35; color: var(--login-ink); background: #f8fafc; border: 1px solid var(--login-line); border-radius: .65rem; }
body.login-page .login-input::placeholder { color: #8895a7; opacity: 1; }
body.login-page .login-input:focus-visible { background: #fff; outline: 2px solid #168bfa !important; outline-offset: 2px; }
body.login-page .login-container button.login-button { display: flex; align-items: center; justify-content: center; gap: .8rem; width: 100%; min-height: 2.9rem; height: auto; margin: .45rem 0 0 !important; padding: .8rem 1rem !important; border: 1px solid #0878df; border-radius: .65rem; background: #0878df; color: #fff; font-size: .87rem; font-weight: 650 !important; line-height: 1.3; box-shadow: 0 5px 12px rgba(8, 120, 223, .16); transform: none !important; transition: background-color .15s ease, box-shadow .15s ease; }
body.login-page .login-container button.login-button:not([disabled]):is(:hover, :focus-visible, :active) { background: #0664bb !important; color: #fff !important; border-color: #0664bb; transform: none !important; }
body.login-page .login-container button.login-button i { transform: none !important; }
body.login-page .login-container button.login-a, body.login-page .login-container button#loginVersion { display: block; min-height: 2rem; height: auto; padding: .3rem .2rem !important; border: 0; background: transparent !important; box-shadow: none; color: #0870d1; font-size: .78rem; font-weight: 500; line-height: 1.5; text-decoration: none; transform: none !important; }
body.login-page .login-container button.login-a { margin: .8rem auto 0 !important; }
body.login-page .login-container button:is(.login-a, #loginVersion):hover { color: #0658a5 !important; text-decoration: underline; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .7rem; padding-top: 1.2rem; border-top: 1px solid var(--login-line); color: var(--login-muted); font-size: .65rem; line-height: 1.5; }
.login-footer > span:first-child { display: block; width: 100%; overflow-wrap: anywhere; }
.login-footer i { margin-right: .25rem; }
body.login-page .login-container button#loginVersion { margin: 0 !important; font-size: .65rem; }
body.darkmode.login-page { --login-ink: #e8f0fb; --login-muted: #9bacc2; --login-line: #334457; background: radial-gradient(ellipse at 10% 15%, #153457, transparent 55%), #0b1523; }
body.darkmode.login-page .login-shell { border-color: #334457; background: #142235; box-shadow: 0 25px 80px rgba(0,0,0,.35); }
body.darkmode.login-page .login-input { background: #0e1c2d; color: #e8f0fb; border-color: #334457; }
body.darkmode.login-page .login-input:focus-visible { background: #172b42; }
body.darkmode.login-page .login-container button:is(.login-a, #loginVersion) { color: #83bfff; }
body.darkmode.login-page .login-container button:is(.login-a, #loginVersion):hover { color: #b7daff !important; }
body.darkmode.login-page .dialog-full-size { background: #142235; color: #e8f0fb; border-color: #334457; }
body.darkmode.login-page .dialog-header { color: #93c5fd; }
@media (max-width: 760px) {
    body.login-page { align-items: flex-start; padding: 1rem; }
    .login-shell { width: min(29rem, 100%); grid-template-columns: minmax(0, 1fr); border-radius: 1.25rem; }
    .login-brand { padding: 1.5rem 1.75rem; gap: 1.2rem; }
    .login-wordmark { width: 13rem; }
    .login-brand h2 { font-size: 1.55rem; }
    .login-eyebrow, .login-brand-message > p, .login-brand-topics, .login-maker { display: none; }
    .login-container { padding: 1.75rem; gap: 1.5rem; }
    .login-workspace { margin-bottom: 1.4rem; padding-bottom: 1.2rem; }
    .login-heading p { margin-bottom: 1.4rem; }
    body.login-page .login-input { font-size: 1rem; }
}
@media (max-width: 380px) {
    body.login-page { padding: .65rem; }
    .login-container, .login-brand { padding: 1.25rem; }
    .login-brand h2 { font-size: 1.35rem; }
    .login-heading h1 { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) { .login-shell * { transition: none !important; } }

body.login-page .login-changelog-dialog {
    left: 50%;
    right: auto;
    width: min(56rem, calc(100vw - 3rem));
    max-height: calc(100vh - 4rem);
    transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
}

body.login-page .login-changelog-dialog.show {
    transform: translateX(-50%) translateY(0) scale(1);
}

body.login-page .login-changelog-dialog.hide {
    transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
}

body.login-page .login-changelog-dialog .dialog-content {
    max-height: calc(100vh - 9rem);
}

.login-changelog {
    box-sizing: border-box;
    width: 100%;
    height: min(34rem, calc(100vh - 10rem));
    margin: 0;
    padding: 0.85rem;
    border: 1px solid #e6edf6;
    border-radius: 0.65rem;
    background: #f8fafc;
    color: #172033;
    font: 0.9rem/1.5 Consolas, "Courier New", monospace;
    overflow: auto;
    white-space: pre-wrap;
}

body.darkmode .login-changelog {
    background: #111827;
    color: #dbeafe;
    border-color: rgba(148, 163, 184, 0.26);
}

@media (max-width: 650px) {
    body.login-page .login-changelog-dialog,
    body.login-page .login-changelog-dialog.show,
    body.login-page .login-changelog-dialog.hide {
        left: 50%;
        right: auto;
        width: calc(100vw - 1.5rem);
        transform: translateX(-50%);
    }
}