/* Scoped to the login dialog so registration and response modals keep their styles. */
#loginModal {
    z-index: 11000;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(31, 15, 20, .65);
    backdrop-filter: blur(6px);
    align-items: flex-start;
}
#loginModal .modal-content {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: 38px;
    border: 1px solid #f0e4e2;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff7f4 0, #fff 210px);
    box-shadow: 0 24px 80px rgba(25, 7, 12, .28);
    color: #33272b;
}
#loginModal .login-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3e9e6;
    color: #644b4d;
    font-size: 25px;
    cursor: pointer;
}
#loginModal .login-heading { text-align: center; margin-bottom: 26px; }
#loginModal .login-emblem { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: #840b0a; color: #fff; font-size: 22px; margin-bottom: 16px; }
#loginModal .login-eyebrow { color: #840b0a; font-size: 10px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; }
#loginModal h2 { font-size: 30px; line-height: 1.2; color: #34232a; margin-bottom: 10px; }
#loginModal .login-heading > p:last-child { font-size: 14px; line-height: 1.6; color: #807176; margin: 0; }
#loginModal label { display: block; width: auto; margin: 0 0 8px; font-size: 13px; font-weight: 600; line-height: 1.5; }
#loginModal input:not([type="hidden"]) { display: block; width: 100%; min-width: 0; height: 50px; padding: 12px 14px; border: 1px solid #e4dbdd; border-radius: 10px; background: #fff; color: #34232a; font-size: 14px; box-shadow: none; }
#loginModal input::placeholder { color: #a09599; }
#loginModal input:focus { outline: none; border-color: #840b0a; box-shadow: 0 0 0 3px rgba(132, 11, 10, .09); }
#loginModal .login-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; }
#loginModal .login-label-row a { color: #840b0a; font-size: 12px; }
#loginModal .login-password-field { position: relative; margin-bottom: 18px; }
#loginModal .login-password-field input { padding-right: 65px; }
#loginModal .login-password-toggle { position: absolute; right: 8px; top: 7px; height: 36px; padding: 0 9px; background: transparent; border: 0; color: #840b0a; font-size: 12px; font-weight: 600; cursor: pointer; }
#loginModal .login-captcha-row { display: flex; align-items: center; gap: 8px; }
#loginModal .captcha-image { width: 112px; height: 48px; object-fit: contain; border: 1px solid #e4dbdd; border-radius: 8px; }
#loginModal .login-refresh { flex-shrink: 0; width: 30px; height: 40px; padding: 0; border: 0; background: transparent; color: #840b0a; cursor: pointer; }
#loginModal .login-submit { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: 24px; padding: 15px; border: 0; border-radius: 10px; background: #840b0a; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s; }
#loginModal .login-submit:hover { background: #650908; }
#loginModal .login-submit:disabled { cursor: wait; opacity: .8; background: #840b0a; }
#loginModal .login-spinner { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: login-spin .8s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #loginModal .login-spinner { animation: none; } }
#loginModal button:focus-visible, #loginModal a:focus-visible { outline: 2px solid #840b0a; outline-offset: 3px; }
#loginModal .login-footnote { text-align: center; margin: 18px 0 0; color: #93858a; font-size: 12px; line-height: 1.5; }
#loginModal .login-field-label { display: block; margin-bottom: 8px; }
#loginModal .text-input { display: block; }
#loginModal .password-container .show-password-icon { top: 53px; }
#loginModal .captcha-image { max-width: 100%; }
#loginModal .refresh-button { font-size: 12px; }
#loginModal .login-submit { margin-top: 24px; }
#loginModal .text-center.mt-2 a { color: #840b0a; font-size: 13px; }
@media (max-width: 480px) {
    #loginModal { padding: 16px 12px; }
    #loginModal .modal-content { padding: 32px 22px 24px; border-radius: 20px; }
    #loginModal h2 { font-size: 27px; }
    #loginModal .captcha-image { width: 94px; }
}