:root {
    --brand: #3159a6;
    --brand-d: #21407a;
    --brand-l: #4f78cf;
    --ink: #1f2b45;
    --muted: #7a869a;
    --line: #e4e8f0;
}

.auth-wrap {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: radial-gradient(1100px 520px at 12% 8%, rgba(79,120,207,.55) 0%, rgba(79,120,207,0) 55%),
                linear-gradient(135deg, #34589f 0%, #1d356b 100%);
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 22px;
    padding: 42px 38px 26px;
    box-shadow: 0 30px 60px -18px rgba(13,28,63,.55);
    animation: authIn .5s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes authIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo img { height: 66px; width: auto; }

.auth-title {
    font-size: 24px; font-weight: 700; color: var(--ink);
    margin: 0 0 4px; text-align: center; letter-spacing: -.2px;
}
.auth-sub {
    font-size: 13.5px; color: var(--muted);
    text-align: center; margin: 0 0 26px;
}

.auth-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--ink); margin: 0 0 7px;
}

.auth-input {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--line); border-radius: 13px;
    padding: 0 14px; height: 50px; margin-bottom: 18px;
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(49,89,166,.12);
}
.auth-input svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.auth-input input {
    border: 0; outline: 0; flex: 1; min-width: 0;
    font-size: 14.5px; color: var(--ink); background: transparent;
}
.auth-input input::placeholder { color: #aab3c5; }
.auth-suffix { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

.auth-domain {
    border: 0;
    border-left: 1.5px solid var(--line);
    outline: 0;
    background: transparent;
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 2px 0 10px;
    white-space: nowrap;
    font-family: inherit;
}

.auth-eye {
    border: 0; background: transparent; padding: 4px;
    cursor: pointer; color: var(--muted); display: flex;
}
.auth-eye:hover { color: var(--brand); }
.auth-eye svg { width: 18px; height: 18px; }

.auth-caps {
    display: none; color: #b9770e; background: #fff7e8;
    border-radius: 9px; padding: 8px 11px; font-size: 12px;
    margin: -6px 0 16px;
}

/* reCAPTCHA v2 checkbox. Google renders it in a fixed-size iframe (304x78) that cannot be styled
   from here, so the wrapper only centres it and gives it the same rhythm as the fields above.
   The card's content box is 354px wide, so the widget fits at its normal size on desktop. */
.auth-captcha {
    display: flex;
    justify-content: center;
    margin: 2px 0 18px;
}

/* Below ~330px of content the iframe would push the card sideways. Scaling keeps the layout
   intact; transform-origin pins it left so the shrunken widget stays centred by the flex above. */
@media (max-width: 400px) {
    .auth-captcha { overflow: hidden; }
    .auth-captcha > div {
        transform: scale(.87);
        transform-origin: 0 0;
        height: 68px;
    }
}

.auth-btn {
    width: 100%; height: 50px; border: 0; border-radius: 13px; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-l), var(--brand));
    color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 12px 22px -8px rgba(49,89,166,.7);
    transition: transform .12s, box-shadow .2s, opacity .2s; margin-top: 4px;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 26px -8px rgba(49,89,166,.85); }
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }

.auth-foot { text-align: center; margin-top: 18px; }
.auth-foot a { color: var(--brand); font-size: 13px; font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.auth-copy { text-align: center; color: #aeb7c7; font-size: 11.5px; margin-top: 26px; }

.auth-maint { text-align: center; padding: 6px 0 4px; }
.auth-maint svg { width: 46px; height: 46px; color: var(--brand); }
.auth-maint h3 { color: var(--ink); font-weight: 700; margin: 12px 0 8px; font-size: 20px; }
.auth-maint p { color: var(--muted); font-size: 13.5px; text-align: justify; line-height: 1.65; }

/* Shown once, to somebody whose session was ended by Data-Management -> Sessions. Without it the
   login page appears mid-task with no explanation and reads as the site logging people out at
   random. See App_Code/Services/SessionRevocation.cs. */
.auth-note {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fff8e8; border: 1px solid #f0dcb0; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 18px;
}
.auth-note svg { width: 20px; height: 20px; color: #c67c12; flex-shrink: 0; margin-top: 1px; }
.auth-note p { color: var(--ink); font-size: 13px; line-height: 1.55; margin: 0; text-align: left; }

@media (max-width: 480px) {
    .auth-card { padding: 32px 22px 22px; border-radius: 18px; }
}