/* ====== Login Page Layout ====== */
.login-wrapper { display: flex; justify-content: center; align-items: center; flex: 1; background-color: var(--background); padding: 3rem; }

.login-box { background-color: #f8f8f8; padding: 2rem 2.5rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 350px; }

    .login-box h2 { color: var(--primary); margin-bottom: 1.5rem; text-align: center; }

    /* Error message inherits global style */
    .login-box .error-message { margin-top: 1rem; }

/* ====== Password Toggle ====== */
.password-wrapper { position: relative; display: flex; align-items: center; }

    .password-wrapper input { width: 100%; padding-right: 2.5rem; /* makes room for the icon */ }

.toggle-password { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-55%); /* centers better */ cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; line-height: 0; }

    .toggle-password svg { width: 20px; height: 20px; display: block; pointer-events: none; }

    .toggle-password:hover { color: var(--primary); }


#resetPanel { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; margin-top: 1.5rem; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    #resetPanel.hidden { display: none; }
    #resetPanel h3 { color: var(--primary); margin-bottom: 1rem; }
#resetError { margin-top: 1rem; }