.login-page{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:2rem 1rem}.login-container{width:100%;max-width:420px;background:white;padding:3rem 2.5rem;border-radius:12px;box-shadow:var(--shadow-hover)}.login-header{text-align:center;margin-bottom:2.5rem}.login-header h1{font-size:2rem;color:var(--primary-color);margin-bottom:.5rem}.login-header p{color:var(--text-light);font-size:1rem}.login-form{display:flex;flex-direction:column;gap:1.5rem}.error-message{padding:.875rem;background-color:#fee;border:1px solid #fcc;border-radius:6px;color:#c33;font-size:.875rem;text-align:center}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--text-color);font-size:.875rem}.form-group input{padding:.875rem 1rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;transition:all .2s}.form-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(74,144,226,.1)}.login-button{padding:1rem;background-color:var(--primary-color);color:white;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.5rem}.login-button:hover{background-color:#3a7bc8;transform:translateY(-2px);box-shadow:var(--shadow)}.login-button:active{transform:translateY(0)}.login-info{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.demo-info{font-size:.875rem;line-height:1.8;color:var(--text-light);text-align:center;background-color:#f8f9fa;padding:1rem;border-radius:6px}.demo-info strong{color:var(--text-color);display:block;margin-bottom:.5rem}@media (max-width:480px){.login-container{padding:2rem 1.5rem}.login-header h1{font-size:1.75rem}}