/* A focused, single-column entrance to cooperative operations. */
.login-page {
    --bg: #0b1630;
    --text: #edf3ff;
    --muted: #a1b3cf;
    --blue: #8bbdff;
    background: var(--bg);
    color: var(--text);
}

.login-page::before {
    z-index: 0;
    background: radial-gradient(ellipse at 50% 38%, #21467a66, transparent 62%),
        linear-gradient(160deg, #0e1e3c, #0b1630 65%, #0c1934);
}

.login-page .site-shell {
    position: relative;
    min-height: 100svh;
    max-width: 1440px;
    padding: 0 56px;
}

.login-page .site-header { height: 96px; flex-shrink: 0; border-color: #a0bfff12; }
.login-page .brand { gap: 12px; }
.login-page .brand > span:first-of-type { font-size: 21px; font-weight: 700; letter-spacing: -.7px; }
.login-page main { padding: 48px 0 96px; }
.login-page .login-layout { display: block; width: 100%; max-width: 480px; padding: 0; }

.login-page .login-panel {
    padding: 40px;
    border: 1px solid #344e76;
    border-radius: 20px;
    background: linear-gradient(145deg, #192e50, #132440);
    box-shadow: 0 24px 80px #030c214d, inset 0 1px 0 #ffffff06;
}

.login-page .login-panel::before { content: none; }
.login-page .panel-top { margin-bottom: 16px; }
.login-page .panel-top > .eyebrow { color: #95c3ff; font-size: 12px; font-weight: 600; letter-spacing: 2.2px; }
.login-page h1 {
    margin: 0 0 32px;
    max-width: 300px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -1px;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.login-page .field { margin-bottom: 22px; }
.login-page .field label { color: #d0dcf0; font-size: 13px; margin-bottom: 9px; }
.login-page input { height: 54px; padding-left: 16px; background: #0c1b34; border-color: #365174; border-radius: 9px; font-size: 16px; }
.login-page input::placeholder { color: #91a5c3; font-size: 13px; }
.login-page input:hover { border-color: #55759e; }
.login-page input:focus { border-color: #8bbdff; box-shadow: 0 0 0 3px #8bbdff20; }
.login-page .password-field input { padding-right: 66px; }
.login-page .password-toggle { top: 5px; right: 6px; min-width: 48px; min-height: 44px; border-radius: 6px; font-size: 12px; color: #b7c9e3; }
.login-page .form-utility { margin: -8px 0 20px; font-size: 12px; color: #b3c4df; }
.login-page .form-utility a { display: inline-flex; align-items: center; min-height: 44px; }
.login-page .button.primary { min-height: 54px; border-radius: 9px; border-color: #a5cdff; background: #8bbdff; color: #0c2344; font-size: 15px; box-shadow: 0 6px 20px #06132a33; }
.login-page .button.primary:hover:not(:disabled) { background: #aed1ff; }
.login-page .signup-prompt { margin-top: 28px; padding-top: 20px; border-color: #354d70; font-size: 12px; color: #a9bbd6; }
.login-page .signup-prompt a { display: inline-flex; align-items: center; min-height: 44px; color: #d5e6ff; }
.login-page .signup-prompt a:hover { color: var(--blue); }
.login-page .message { border-radius: 9px; font-size: 13px; }

@media (max-width: 600px) {
    .login-page .site-shell { padding: 0 20px; }
    .login-page .site-header { height: 80px; }
    .login-page .brand { gap: 10px; }
    .login-page .brand > span:first-of-type { font-size: 18px; letter-spacing: -.6px; }
    .login-page .brand img { width: 26px; height: 26px; }
    .login-page main { padding: 32px 0 64px; }
    .login-page .login-panel { padding: 30px 24px; border-radius: 16px; }
    .login-page h1 { font-size: 24px; margin-bottom: 28px; }
}

@media (max-width: 360px) {
    .login-page .site-shell { padding: 0 16px; }
    .login-page .login-panel { padding: 28px 20px; }
    .login-page h1 { font-size: 22px; }
    .login-page .signup-prompt { font-size: 11px; gap: 8px; }
}

.login-page .brand img.brand-logo{width:64px;height:auto}