/* Login-only presentation; the existing controller owns visibility, errors and authentication. */
#DlgLogin_Box {
    width: 450px;
    margin: 0 !important; /* Shared recenter writes margins; transform also handles changing error heights. */
    transform: translate(-50%, -50%);
    border: 1px solid #dedde1;
    border-radius: 9px;
    box-shadow: 0 10px 32px #23182930;
    color: #352035;
    font-family: Arial, sans-serif;
}
#DlgLogin_Box * { box-sizing: border-box; }
#DlgLogin_Content { float: none; width: 100%; padding: 0; }
#DlgLogin .DlgLogin_About { display: flex; justify-content: flex-end; padding: 18px 25px 0; }
#DlgLogin a { color: #356c9f; font-size: 14px; text-decoration: none; }
#DlgLogin a:hover { text-decoration: underline; }
#DlgLogin .DlgLogin_Artwork { height: 205px; }
#DlgLogin .DlgLogin_Artwork img { display: block; width: 320px; max-width: 100%; height: 100%; object-fit: contain; margin: auto; }
#DlgLogin .DlgLogin_FormPanel { padding: 0 40px 28px; }
#DlgLogin_Heading { font: 500 26px/1.25 Arial, sans-serif; text-align: center; margin: 4px 0 25px; }
#DlgLogin .DlgLogin_Form { display: grid; grid-template-columns: minmax(0, 1fr); }
#DlgLogin .DlgLogin_Fields { grid-row: 1; }
#DlgLogin .DlgLogin_Fields label { display: block; color: #4a454b; font-size: 14px; line-height: 1.4; margin-bottom: 7px; }
#DlgLogin .DlgLogin_Fields input { height: 44px; width: 100%; margin: 0 0 17px; padding: 10px 12px; border: 1px solid #cac8ce; border-radius: 4px; font: 16px Arial, sans-serif; background: #fff; color: #352035; }
#DlgLogin .DlgLogin_Remember { grid-row: 2; display: flex; align-items: center; gap: 9px; margin: 3px 0 21px; font-size: 14px; color: #514b54; cursor: pointer; }
#DlgLogin #DlgLogin_CBRemember { appearance: auto; display: inline-block; position: static; opacity: 1; width: 17px; height: 17px; margin: 0; accent-color: #ef3a23; flex-shrink: 0; }
#DlgLogin_BLogin { grid-row: 3; width: 100%; min-height: 44px; padding: 13px 16px; font: 16px Arial, sans-serif; }
#DlgLogin .DlgLogin_Reset { grid-row: 4; text-align: center; margin-top: 19px; }
#DlgLogin .DlgLogin_Errors { grid-row: 5; overflow-wrap: anywhere; }
#DlgLogin .DlgLogin_Errors p { margin: 14px 0 0; font-size: 14px; }
#DlgLogin .DlgLogin_Footer { padding: 20px 18px; text-align: center; border-top: 1px solid #eceaee; background: #fafafa; color: #645e68; font-size: 14px; }
#DlgLogin .DlgLogin_Footer a { margin-left: 5px; }
#DlgLogin .DlgLogin_Processing { min-height: 240px; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 24px; }
#DlgLogin .DlgLogin_Processing i { font-size: 48px; color: #ef3a23; }

/* Narrow or short windows retain the single-column workflow with smaller artwork and gaps. */
@media (max-width: 600px), (max-height: 760px) {
    #DlgLogin .DlgLogin_About { padding-top: 14px; }
    #DlgLogin .DlgLogin_Artwork { height: 135px; }
    #DlgLogin .DlgLogin_FormPanel { padding: 0 24px 21px; }
    #DlgLogin_Heading { font-size: 24px; margin: 0 0 18px; }
    #DlgLogin .DlgLogin_Fields input { margin-bottom: 13px; }
    #DlgLogin .DlgLogin_Remember { margin-bottom: 15px; }
    #DlgLogin .DlgLogin_Reset { margin-top: 15px; }
    #DlgLogin .DlgLogin_Footer { padding: 16px 14px; }
}

/* Wide, low laptop windows use the horizontal alternative; tall desktops stay vertical. */
@media (min-width: 800px) and (max-height: 760px) {
    #DlgLogin_Box { width: 720px; }
    #DlgLogin .DlgLogin_Layout { display: grid; grid-template-columns: 42% 58%; }
    #DlgLogin .DlgLogin_About { grid-column: 2; grid-row: 1; padding: 20px 28px 0; }
    #DlgLogin .DlgLogin_Artwork { grid-column: 1; grid-row: 1 / 4; height: auto; min-height: 0; border-right: 1px solid #f0edf0; display: flex; align-items: center; }
    #DlgLogin .DlgLogin_Artwork img { width: 100%; height: auto; }
    #DlgLogin .DlgLogin_FormPanel { grid-column: 2; grid-row: 2; padding: 10px 28px 26px; }
    #DlgLogin_Heading { text-align: left; margin: 0 0 24px; }
    #DlgLogin .DlgLogin_Form { grid-template-columns: minmax(0, 1fr) auto; column-gap: 9px; }
    #DlgLogin .DlgLogin_Fields { grid-column: 1 / 3; }
    #DlgLogin .DlgLogin_Remember { grid-column: 1; margin: 2px 0 17px; }
    #DlgLogin .DlgLogin_Reset { grid-column: 2; grid-row: 2; align-self: center; margin: 2px 0 17px; }
    #DlgLogin_BLogin { grid-column: 1 / 3; }
    #DlgLogin .DlgLogin_Errors { grid-column: 1 / 3; grid-row: 4; }
    #DlgLogin .DlgLogin_Footer { grid-column: 2; grid-row: 3; padding: 18px 12px; }
}
/* Preserve touch targets and the shared scroll fallback when a keyboard leaves little room. */
@media (pointer: coarse) {
    #DlgLogin .DlgLogin_Remember, #DlgLogin .DlgLogin_Reset, #DlgLogin .DlgLogin_About a, #DlgLogin .DlgLogin_Footer a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}