/* Theme tokens: unified light container with restrained local colors. */
:root
{
    --page-bg: #2d3741;
    --page-bg-alt: #202933;
    --card-bg: #e7edf2;
    --card-border: #c7d0d8;
    --card-divider: #d4dce4;
    --card-shadow: 0 20px 44px rgba(10, 16, 24, 0.26);
    --text-strong: #253548;
    --text-muted: #5f6f80;
    --field-bg: #f9fbfc;
    --field-border: #b8c4cf;
    --field-border-focus: #8199b1;
    --field-text: #253548;
    --link-color: #5b748d;
    --button-top: #7b91a7;
    --button-bottom: #6a8096;
    --button-top-hover: #70869b;
    --button-bottom-hover: #61768a;
    --info-bg: rgba(123, 145, 167, 0.14);
    --info-border: rgba(123, 145, 167, 0.24);
    --warning-bg: rgba(163, 132, 87, 0.16);
    --warning-border: rgba(195, 164, 116, 0.24);
    --warning-text: #6f5527;
    --error-bg: rgba(160, 100, 106, 0.14);
    --error-border: rgba(187, 128, 134, 0.22);
    --error-text: #7b3f46;
}

/* Page shell: dark outer background, light unified inner card. */
html
{
    min-height: 100%;
}

body
{
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-alt) 100%);
    color: var(--text-strong);
    font-family: Tahoma, Arial, Helvetica, sans-serif;
}

img
{
    display: block;
    max-width: 100%;
    border: 0;
}

a
{
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:focus
{
    text-decoration: underline;
}

button,
input
{
    font-family: inherit;
}

input[type="hidden"]
{
    display: none !important;
}

form#logonForm
{
    margin: 0;
}

/* Layout: logo left, controls right, both on the same light surface. */
.auth-shell
{
    min-height: 100vh;
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-layout
{
    width: 100%;
    max-width: 58rem;
    display: grid;
    grid-template-columns: 18rem minmax(0, 24rem);
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: 1.1rem;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.auth-layout-logout
{
    max-width: 50rem;
}

/* Brand side: same base surface as the form, only separated by a subtle divider. */
.brand-panel
{
    min-height: 23rem;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-right: 1px solid var(--card-divider);
}

.brand-logo
{
    width: auto;
    max-width: 14rem;
    max-height: 4rem;
}

/* Auth side: no dark block, same card surface as the logo panel. */
.auth-panel
{
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.auth-content
{
    width: 100%;
}

.auth-content-logout
{
    max-width: 20rem;
}

/* Messaging: existing dynamic containers restyled for the light card. */
.auth-status
{
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.auth-message
{
    padding: 0.8rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-strong);
}

#ssomsg:empty,
#badmsg:empty
{
    display: none;
}

.auth-message-info,
.auth-message-static
{
    background: var(--info-bg);
    border-color: var(--info-border);
}

.auth-message-warning
{
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.auth-message-error
{
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

#reset_link
{
    margin-left: 0.35rem;
    font-weight: 700;
}

/* Form fields: three primary fields followed by a compact compatibility block. */
.auth-form-section
{
    display: grid;
    gap: 1rem;
}

.auth-section-label
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-fields
{
    display: grid;
    gap: 0.85rem;
}

.auth-field
{
    display: grid;
    gap: 0.35rem;
}

.auth-field label
{
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.txt
{
    width: 100%;
    min-height: 2.9rem;
    padding: 0.8rem 0.9rem;
    box-sizing: border-box;
    border: 1px solid var(--field-border);
    border-radius: 0.75rem;
    background: var(--field-bg);
    color: var(--field-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.txt:focus
{
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 3px rgba(129, 153, 177, 0.16);
}

/* Supporting choice block: subtle light sub-panel below the three main fields. */
.auth-device-choice
{
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(95, 111, 128, 0.16);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.42);
}

.auth-device-choice legend
{
    padding: 0 0.3rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-choice
{
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.55rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    cursor: pointer;
}

.auth-choice:first-of-type
{
    margin-top: 0.35rem;
}

.auth-choice input
{
    margin: 0.14rem 0 0;
    accent-color: #7f97af;
}

.auth-actions
{
    margin-top: 0.1rem;
}

.auth-submit
{
    width: 100%;
    min-height: 3rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, var(--button-top) 0%, var(--button-bottom) 100%);
    color: #f5f8fa;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.auth-submit:hover,
.auth-submit:focus
{
    background: linear-gradient(180deg, var(--button-top-hover) 0%, var(--button-bottom-hover) 100%);
    box-shadow: 0 10px 18px rgba(29, 42, 54, 0.16);
}

.auth-submit:disabled
{
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

#captchabox
{
    margin-top: 1rem;
}

/* Noscript fallback: keep warning visible against the darker page background. */
#dvErr
{
    width: min(92vw, 30rem);
    margin: 1rem auto 0;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid rgba(218, 154, 161, 0.28);
    border-radius: 0.75rem;
    background: rgba(89, 42, 47, 0.9);
    color: #f0d9dc;
}

#dvErr img
{
    flex: 0 0 auto;
}

/* Responsive behavior: stacked layout remains one light card with no stripe effect. */
@media (max-width: 760px)
{
    .auth-shell
    {
        padding: 1rem;
    }

    .auth-layout
    {
        grid-template-columns: 1fr;
    }

    .brand-panel
    {
        min-height: 10rem;
        padding: 1.5rem;
        border-right: 0;
        border-bottom: 1px solid var(--card-divider);
    }

    .auth-panel
    {
        padding: 1.4rem;
    }
}